17

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

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

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

4

1 回答 1

11

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

来自相关文章：

新的 flexbox 代码的多通道布局代码路径要少得多。不过，您仍然可以很容易地点击多遍代码路径（例如 flex-align:stretch 通常是 2 遍）。一般来说，在普通情况下它应该快得多，但您可以构建一个同样慢的情况。

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

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

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

于 2014-11-14T17:23:14.153 回答