css - Flexbox 不包装 flex 元素

Question

我正在尝试使用 flexbox (inb4:我不关心 IE) 为我的网站设置布局，但由于某些原因，元素没有换行。

http://jsfiddle.net/EnUuA/

section { display:-webkit-flex; -webkit-flex-flow: row wrap; width: 200px; /* ... */ }
div { -webkit-flex: 1; width:48%; /* ... */ }

我试过以 px 为单位设置宽度，我也试过完全去除宽度......仍然没有换行!

那么，我怎样才能让我的 flexbox 环绕在它们的容器中？

请在您回答之前，确保您的回答实际使用了 flexible box model并且不仅仅是给我 block 级元素。

Answer 1

似乎(截至今天)flex-flow 属性不在 Firefox 中(至少 CR 2012 版本)。

不过，您可以在 Opera/Chrome 中看到此 fiddle 中的换行。

Safari Nightly 也可以运行 http://nightly.webkit.org

[编辑] 愚蠢的罗盘忘记了前缀

引用资料:

https://developer.mozilla.org/en-US/docs/CSS/flex https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

NB 从 FF 21.0a1 开始它不支持 flex-wrap

至少您可以验证该属性是否有效:

http://jsfiddle.net/M7yLn/1/