前端 - css3 的display：box无法换行布局？

Question

使用display：box给父元素布局，按教程上的-webkit-box-lines: multiple;换行，但是布局无法换行该如何解决？

PHPz · Answer

之前就说过了 disply: -webkit-box 会存在这个问题，虽然有 box-lines 这个属性，但是支持旧语法的浏览器都没有实现它，这就是使用 flex 布局时需要考虑的一点。可以考虑使用 float 加一些高级选择器来降级处理。

补充一点，我之前遇到这个问题时，是配合 Modernizr 来处理的。在不支持标准 flex 布局的浏览器中，Modernizr 会给标签添加 no-flexbox 的类名，然后我们就可以在样式文件中进行自定义了，如：

.nav {
    display: flex;
    flex-wrap: wrap;
}

.no-flexbox .nav {
    display: block;
}

.no-flexbox .nav__item {
    float: left;
}

怪我咯 · Answer

box、flex的自动换行布局兼容性非常差。box在我的所有浏览器都无法换行，flex在比较新的chrome里倒是可以换行