css - Can flexbox divide items evenly on multiple rows?

Question

I've played around with responsive flexbox grids, with no media queries.

http://jsbin.com/qurumisu/1 (rescale the window to see how it works)

It fits as many flex items as it can per row and stretches their width equally to fill the whole line. However, this doesn't help "orphan" items. If the first line fits 5/6 items there is only one left for the second line, making it stretch much wider than it's siblings. I would prefer to avoid this behavior by having the elements divided evenly on the amount of rows required.

Is this possible?

Answer 1

No, not without media queries adjusting the flex-basis value. Flex items that stretch and wrap attempt to maximize the amount of items that fit on each row.

You may want to consider using the multi-column module instead, which will attempt to equally distribute elements across all of the columns created:

.foo {
    columns: 100px;
}

http://caniuse.com/#feat=multicolumn