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次通过）。一般来说，它应该是多少   在常见情况下更快，但你可以构建一个案例   同样慢。

那就是说，如果你可以侥幸逃脱，那就定期进行街区布局   （非浮动），通常会比新的flexbox快或快   它始终是单通道。但新的flexbox应该比使用更快   表或编写自定义的JS基础布局代码。

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

LE：当你有4-5个嵌套的flexbox时，有a bug in Firefox使回流速度非常慢，但在最新版本（37 +）中修复了它。

显示：flex; vs calc（）;性能

1 个答案: