0

根据这个问题，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？

4

1 回答 1

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

于 2013-03-11T18:29:15.673 回答