Menu
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.
789
An initial setting of a flex container is flex-wrap: nowrap . This means that when you create a flex container (by applying display: flex or display: inline-flex to an element) all child elements ("flex items") are confined to a single line. To enable flex items to wrap use flex-wrap: wrap .
The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in.
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/
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
