html - 表示: フレックス; vs calc(); パフォーマンス

Question

私は今日、2 つの div を並べて配置する最もパフォーマンスの高い方法は何かと考えているディスカッションに参加しました。

一方では を使用するのが大好きdisplay:flex;で、もう一方には を使用するオプションがありますcalc()。その理由は、div にパディングがあり、パディングによって幅を減らす必要があるためです。場合：

<div class='container'>
 <div class='inner'></div>
 <div class='inner'></div>
</div>

どちらも 50% 幅にする必要があります。デフォルトの css は次のとおりです。

* {
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.container {
 height: 100%;
 width: 100%;
}
.inner {
 width: 50%;
 padding: 20px;
}

display:flex;方法は追加になります：

.container {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 align-content: stretch;
}

calc()方法は次のとおりです。

.inner {
 width: calc(100% - 40px);
 display: inline-block;
}

また：

.inner {
 width: calc(100% - 40px);
 float: left;
}

CSS にテーブル レイアウトは必要ありません。さらに、ブラウザのバージョンを気にする必要はありません。これは、常に最新バージョンでのみ機能するはずです。

何を使用することをお勧めしますか？より多くのパフォーマンスを持っているものは何ですか?

すでにパフォーマンスが大幅に向上しているという記事を見つけました。リンク