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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:46:31  来源:igfitidea点击:

Flexbox not wrapping flex items

css

提问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)为我的网站设置布局,但由于某种原因,这些项目没有包装。

http://jsfiddle.net/EnUuA/

http://jsfiddle.net/EnUuA/

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

? I've tried setting a width in pxand 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-flowproperty 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:

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

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

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

Wrapping like a boss

像老板一样包装