Question

我有一个针对现代浏览器的网络应用。 Flexbox随处可用于垂直居中。唯一真正的CSS / SASS黑客是clearfix：

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

我是否可以使用flexbox的任何方面来确保元素包含其子元素，因此我可以停止使用clearfix hacks？

我知道这被称为＆＃39; hasLayout＆＃39;通过浏览器渲染引擎。

Answer 1

如果您没有设置特定的flex，则height ed项会根据其子项的大小进行缩放，因此您无需依赖float或扩展名clearfix。我现在有pen我正在玩flex。

我正在使用的规则是：

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

然后对于每个孩子，我指定一个我希望它填充的宽度。

对于这些规则，display:flex告诉父级显示为弹性框。 flex-flow是flex-direction和flex-wrap的简写 - 在这种情况下，我告诉家长让孩子坐在一排，当他们到达可用的尽头时宽度，包裹到下一行。 justify-content: space-between有助于孩子之间的水平间距，无需在行尾取消margin。 align-content: space-between有助于添加一些垂直间距。我发现我必须在孩子身上添加margin-bottom才能创建一个小空白。

但是，一个快速的警告是，如果你因任何原因仍然需要使用float，那么最好还是清除它们。

我可以使用flexbox来提供元素布局，因此弃用了clearfix吗？

1 个答案: