我可以使用 flexbox 来提供元素布局，从而弃用 clearfix 吗？

Question

与Is clearfix deprecated?相似，但不相同。

我有一个针对现代浏览器的网络应用程序。 Flexbox 无处不在用于垂直居中。唯一真正的 CSS/SASS hack 是 clearfix:

@mixin clearfix {
    content: "";
    display: table;
    clear: both;
}

我可以使用 flexbox 的任何方面来确保元素包含其子元素，这样我就可以停止使用 clearfix hacks 了吗？

我知道这被浏览器渲染引擎称为 'hasLayout'。

Answer 1

A flexed item 将根据其 children 的大小缩放假设你没有设置特定的 height，所以你不需要依赖 float，或通过扩展 clearfix。我有一个 pen，我现在正在和 flex 一起玩。

我使用的规则是：

.parent {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
}
.child {
  margin-bottom: 1.5%;
}

然后对于每个 child，我都指定了我希望它填充的宽度。

对于这些规则，display:flex 告诉 parent 显示为弹性框。 flex-flow 是 flex-direction 和 flex-wrap 的 short-hand - 在这种情况下，我告诉 parent 让它的 children 坐在行，当它们到达可用宽度的末尾时，换行到下一行。 justify-content: space-between 有助于 children 之间的水平间距，无需取消行末尾的 margin。 align-content: space-between 有助于增加一些垂直间距。我发现我必须将 margin-bottom 添加到 children 上才能创建一个小白色 space.

不过，一个快速的警告是，如果您出于任何原因仍然需要使用 floats，最好仍然清除它们。

我可以使用 flexbox 来提供元素布局，从而弃用 clearfix 吗？

Can I use flexbox to give an element layout, and therefore deprecate clearfix?

css

clearfix

flexbox