如何編寫持久性CSS盒子規則？

根據這一question，Chrome瀏覽器的開發者改變如何編寫持久性CSS盒子規則？

display: -webkit-box到display: -webkit-flexbox

然而，當我現在（v25.0.1364）測試它，我看到它的再次改變，看看我們有什麼：

old and new implementation

我們再次丟失了display:-webkit-flex和-webkit-flex-direction:column規則。
（黑色字體表示它們不適用）

因此，我想編寫一個防彈規則，以便它在任何情況下都能正常工作。但是，如果我寫的是這樣的：

<div id="box_container" class="horz_new horz_old"> <div>

它，因爲它接受一些webkit-box財產以及一些-webkit-flex性質，這使得規則之間有些衝突再次失敗。

我已經準備好jsfiddle，包括所有需要的東西。

任何人都可以幫助我嗎？或者，也許我應該回到浮動divs？

來源

2013-03-11 Cihad Turhan

如果您想要防彈，請避免供應商擴展。供應商擴展的重點在於它們標記的實驗性特徵因此可能會發生變化。 – robertc 2013-03-11 13:37:51

是的......如果你需要防彈，那麼停止使用flexbox，這太新了。 – Eric 2013-03-11 16:33:43

舊的-webkit-box-*屬性僅適用於（適用於）有display: -webkit-box的容器。你應該能夠混合新的（display: flex）和舊的flexbox（display: box）這很多問題。這裏有一個偉大的文章，一起使用兩個：http://css-tricks.com/using-flexbox/

我已經更新你的小提琴（http://jsfiddle.net/UjZF9/1/）與一些變化，使一切工作。基本上：

-webkit-flex-direction: row;爲水平佈局（默認）和-webkit-flex-direction: column;垂直佈局。
stretch對於justify-content屬性不是可能的值。有關可能的值，請參閱https://developer.mozilla.org/en-US/docs/CSS/justify-content。
您的孩子需要-webkit-flex:1（類似於-webkit-box-flex:1）。

我在http://www.htmlfivecan.com/#11上有一些不錯的可玩演示，看看不同的flexbox屬性如何改變佈局。試一試。

來源

2013-03-11 18:29:15 ebidel

謝謝ebidel，這太好了。 – 2013-03-11 20:19:53

如何編寫持久性CSS盒子規則？

回答

相關問題