CSS 弹性盒不包装弹性项目
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13389317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox not wrapping flex items
提问by Martin
I'm trying to set up a layout for my site using flexbox (inb4: I don't care about IE)but for some reason the items aren't wrapping.
我正在尝试使用 flexbox (inb4:我不关心 IE)为我的网站设置布局,但由于某种原因,这些项目没有包装。
section { display:-webkit-flex; -webkit-flex-flow: row wrap; width: 200px; /* ... */ }
div { -webkit-flex: 1; width:48%; /* ... */ }
?
I've tried setting a width in px
and I've tried removing the width completely.. still doesn't wrap!
? 我试过设置一个宽度px
,我试过完全删除宽度..仍然没有换行!
So, how can I get my flexboxes to wrap around in their container?
那么,我怎样才能让我的 flexbox 环绕在它们的容器中呢?
Please, before you answer, make sure that your answer actually uses the flexible box modeland isn't just giving me block level elements.
请在你回答之前,确保你的回答实际上使用了灵活的盒子模型,而不仅仅是给我块级元素。
回答by Jimmerz28
It seems that (as of today) the flex-flow
property is one that isn't in on Firefox (at least the CR 2012 version).
似乎(截至今天)该flex-flow
属性不在 Firefox 中(至少是 CR 2012 版本)。
You can see the wrapping in this fiddle working in Opera/Chrome, however.
但是,您可以在 Opera/Chrome 中看到此小提琴中的包装。
Safari Nightly also has it functioning http://nightly.webkit.org
Safari Nightly 也有它的功能http://nightly.webkit.org
[edit] stupid Compass forgot the prefixes
[编辑] 愚蠢的指南针忘记了前缀
References:
参考:
https://developer.mozilla.org/en-US/docs/CSS/flexhttps://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
https://developer.mozilla.org/en-US/docs/CSS/flex https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
NBas of FF 21.0a1 it does not support flex-wrap
NB自 FF 21.0a1 起不支持flex-wrap
At least you can validate the property works:
至少您可以验证该属性是否有效: