Guy Benron Guy Benron - 1 year ago 56
CSS Question

How to display wrapping flex items as space-between with last row aligned left?

I have a fixed-width container into which several variable-width elements must appear in a row, which can spill over into additional rows as necessary.

However, the beginning of each element must be aligned with the one on top of it, so in ASCII art it would look like so (say, padding of 1):

/----------------------------------\
| |
| # One # Two # Three # Four |
| # Five # Six |
| |
\----------------------------------/


In other words:


  • The first element of every row must be left-aligned

  • The last element of every row (except for the final row) must be right-aligned

  • Every element must be left-aligned to the element above it



I'm trying to use flexbox for this without success.

This is the best I've come so far, using
flex-wrap: wrap
for the container and
flex-grow: 1
for the elements.

Problem is that the last row fills out to the edge.

justify-content: flex-start; // this does nothing


If I take away
flow-grow: 1
then the elements aren't distributed equally. I also tried fiddling around with
last-of-type
on the elements but it's also not enough.

Is this even possible with
flexbox
, or am I going about it the wrong way?

Thanks...

Answer Source

After trying the suggestions here (thanks!) and searching the web long and wide, I've reached the conclusion that this is simply not possible with flexbox. Any by that I mean that others have reached this conclusion while I stubbornly tried to make it work anyway, until finally giving up and accepting the wisdom of wiser people.

There are a couple of links I came across that might explain it better, or different aspects of the requirements, so I'm posting them here for... posterity.

How to keep wrapped flex-items the same width as the elements on the previous row?

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download