Question

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.

Answer 1

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/