如何编写持久的CSS盒子规则？

Question

根据此question，Chrome的开发人员已更改

display: -webkit-box至display: -webkit-flexbox

然而，当我现在测试它时（v25.0.1364），我看到它再次改变了，看看我们有什么：

我们再次失去display:-webkit-flex和-webkit-flex-direction:column规则。
（黑色字体表示不适用）

因此，我想写一个防弹规则，无论如何它都会起作用。但是，如果我写这样的话：

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

它再次失败，因为它接受了一些webkit-box属性以及一些-webkit-flex属性，这使得规则之间发生冲突。

我已经准备了jsfiddle，包括所有需要的东西。

任何人都可以帮我这个吗？ 或者，也许我应该回到浮动的div？

Answer 1

旧的-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属性如何改变布局。试一试。