CODEWITHSUNDEEP
css
xyhhx
xyhhx

Reputation: 6674

Flexbox not wrapping flex items

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.

Upvotes: 6

Views: 22388

Answers (1)

Jimmerz28
Jimmerz28

Reputation: 1113

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/

Wrapping like a boss

Upvotes: 7

Related Questions