显示：弯曲；与计算（）；表现

Question

我今天在一次讨论中出现，我想知道将两个 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 中使用任何表格布局。 此外，我们不需要处理浏览器版本，这应该始终只在最新版本中起作用。

推荐使用什么？什么性能更好？

我已经找到一篇文章，性能已经提高了很多。 Link

Answer 1

出于好奇，我进行了一个简单的测试，float+calc 与 flex 之间的性能似乎没有任何差异，除了 IE 渲染都比 FF 和 Chrome 慢得多。

来自related article：

新的 flexbox 代码具有更少的多通道布局代码路径。你 尽管如此，仍然可以很容易地命中多遍代码路径（例如 flex-align：拉伸通常是 2-pass）。一般来说应该很多 在常见情况下更快，但您可以构建一个案例 同样慢。

也就是说，如果你能侥幸逃脱，常规的块布局 （非浮动），通常会比新的 flexbox 快或快，因为 它总是单程的。但是新的 flexbox 应该比使用更快 表格或编写基于 JS 的自定义布局代码。

我很确定 calc() 使块布局也需要多次传递 :)

---

LE：a bug in Firefox 在您有 4-5 个嵌套的 flexbox 时使重排非常慢，但在最新版本 (37+) 中已修复。