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

Question

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?

Answer 1

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