Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox not wrapping flex items

Tags:

css

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.

like image 789
Martin Avatar asked Nov 14 '12 23:11

Martin


People also ask

Why are flex items not wrapping?

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 .

What flexbox property do you use to define how Flex items will be wrapped?

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.


1 Answers

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

like image 119
Jimmerz28 Avatar answered Sep 19 '22 10:09

Jimmerz28