Flexbox不包装flex项目 [英] Flexbox not wrapping flex items

问题描述

我尝试使用flexbox （inb4：我不在乎IE）为我的网站设置布局，但由于某种原因，这些项目未包装。

http://jsfiddle.net/EnUuA/

 节{display：-webkit-flex; -webkit-flex-flow：row wrap; width：200px; / * ... * /} 
 div {-webkit-flex：1;宽度：48％; / * ... * /} 
  
 
 
 
 
我试过设置宽度 px ，我已尝试完全移除宽度。仍然不换行！
 
 
 
       确保您的答案实际上使用灵活框模型，而不仅仅是 
 
解决方案
似乎（截至今天） flex-flow 属性是一个不在Firefox（至少是CR 2012版本）的属性。
 
 
 
这个小提琴在Opera / Chrome上工作，但是。 
 
 
 
 Safari Nightly还具有功能 http：//nightly.webkit .org  
 
 
 
  stupid指南针忘记了前缀
 
 
 
参考文献：
 
 
 
  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/  
 
 
 
  
 
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.

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 px and I've tried removing the width completely.. still doesn't wrap!

So, how can I get my flexboxes to wrap around in their container?

Please, before you answer, make sure that your answer actually uses the flexible box model and isn't just giving me block level elements.
解决方案
It seems that (as of today) the flex-flow property is one that isn't in on Firefox (at least the CR 2012 version).

You can see the wrapping in this fiddle working in Opera/Chrome, however. 

Safari Nightly also has it functioning http://nightly.webkit.org

[edit] stupid Compass forgot the prefixes

References: 

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

NB as of FF 21.0a1 it does not support flex-wrap

At least you can validate the property works:

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



                        
这篇关于Flexbox不包装flex项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！