4

I have a ul with 5 li children. Here are the relevant styles:

ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

This looks great when the viewport is wide enough to fit all 5 items and when it's narrow enough for only 1, 2, or 3 items per row.

The problem is when it's not quite wide enough for all 5, but not narrow enough to break after the third item. As a result, the first 4 items are on the same row, with the fifth item on its own line.

What I'd like is for the flexbox to keep the rows as balanced as possible. So for example, the row lengths should be 3 and 2 instead of 4 and 1, even though a fourth item could technically fit on the top row. Generally, if I had 6 items, instead of breaking 5/1 or 4/2 it would break at 3/3 to keep the rows as balanced as possible.

I've been referencing https://css-tricks.com/snippets/css/a-guide-to-flexbox/ but the grow/basis/shrink styles don't seem to apply here.

Is this only possible with granular media queries or is there a flex-specific style that would help?

Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
  • No, there is no native flexbox method for this. You would probably still need media queries but this can be 'hacked' using invisible elements or pseudo-elements...but frankly I think you are after a proper grid system which flexbox is not - http://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox – Paulie_D Aug 07 '16 at 10:37
  • Is this what you are looking for? [4 Floating DIVs that respond symmetrically on narrowing screens with CSS](http://stackoverflow.com/questions/40119510/4-floating-divs-that-respond-symmetrically-on-narrowing-screens-with-css) – iantresman Nov 18 '16 at 19:07

0 Answers0