Flexbox - 舊設備上的柔性包裝

我已經使用flexbox創建了一個2列布局，頂部有一個div，跨越兩列（我使用它作爲菜單佈局）。以下小提琴展示了我是如何實現這一目標的。不幸的是，儘管它在Chrome/iOS 7中完美運行，但它在舊版本的Safari中似乎不起作用。 http://jsfiddle.net/Jtts9/Flexbox - 舊設備上的柔性包裝

我不需要支持IE，但確實需要支持Android/iOS。這在Chrome和iOS7中正確顯示，但是當我使用舊語法（例如display: -webkit-box;）時，我無法複製這兩列，因爲舊版語法中似乎沒有flex-flow: row wrap。我見過box-lines的一些引用，但它聽起來像是不支持。

如何在使用舊版2009 flexbox語法時實現相同外觀？

來源

2013-11-27 Digital-Clouds

你看過Autoprefixer嗎？它爲你處理所有這些事情。您可以指定要支持的瀏覽器。強烈建議：http://css-tricks.com/autoprefixer/ – jbenjohnson

[flexbox和wrap屬性]的可能重複（http://stackoverflow.com/questions/16773928/flexbox-and-wrap-property） – cimmanon

我最終放棄了舊的Flexbox語法，並使用了浮點型和僞選擇器。

與原始問題相比，此小提琴顯示瞭解決方案。

http://jsfiddle.net/HQPKM/7/

我所做的是適用float: left於所有的項目，然後用下面的：

.item2 :nth-child(2){ 
    float: right; 
}

每第二個元素浮動到右側。

此外，複製Flexbox，就當是奇數的項目存在的行爲，我添加了以下規則：

.item2:last-child:not(:nth-child(odd)){ 
    width: calc(100% - 2px); 
}

這使得最終的盒子跨越整個寬度，如果有奇數框。

來源

2013-11-28 15:28:37

Flexbox - 舊設備上的柔性包裝

回答

相關問題