嵌套弹性盒子

2022-01-19 00:00:00 performance frontend css flexbox responsive-design

我发现 flex box 真的很有用，自从我发现它后，我很想在任何地方使用它.

I find flex box really useful, and since I discovered it I am tempted to use it everywhere.

嵌套弹性盒子是个好习惯吗?有很多，尤其是嵌套的，对性能有影响吗?

Is it a good practice to nest flex-boxes? Does having a lot of them and especially nested ones has an impact on performance?

推荐答案

简而言之，是的，您会看到性能下降约 10 倍，但我们仍在讨论毫秒数.

In short yes you will see dip in performance by around 10x we are still talking milliseconds here though.

所以我会谨慎使用它们，因为可以将渲染速度从 10 毫秒更改为 100 毫秒，其中很多本质上会大大增加渲染时间.

So I would be wary of using a lot of them because one could change render speed from 10MS to 100MS a lot of them could in essence highly increase the render time.

此外，它们与浏览器具有可比性，并且无法很好地使用绝对定位和块元素.

Plus there is their comparability with browser's and their inability to play well with absolute positioning and block element's.

现在我建议使用 display:table 并为孩子使用 display:table-cell &display:table-row.

For now I would recommend using display:table and for the children display:table-cell & display:table-row.

这是我使用的一个例子:

here is an example of what I use:

.align-table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.t-align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}

相关文章