前端 - 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裡倒是可以換行