嵌套弹性盒子

Nesting flex box

我发现 flex box 非常有用,自从发现它后,我很想在任何地方使用它。

问题

嵌套 flex-boxes 是个好习惯吗?有很多它们,尤其是嵌套的对性能有影响吗?

简而言之,是的,您会看到性能下降了大约 10 倍,不过我们这里仍然在谈论毫秒数。

所以我会谨慎使用大量它们,因为可以将渲染速度从 10MS 更改为 100MS,大量它们实际上会大大增加渲染时间。

另外还有它们与浏览器的可比性以及它们无法很好地处理绝对定位和块元素。

现在我建议使用 display:table,对于 children display:table-cell & display:table-row

这是我使用的示例:

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