How to display wrapping flex items as space-between with last row aligned left?
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
There is no easy way to do this with flexbox. But if you are willing to sacrifice IE then you can do it with css grid
, add this to the container:
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
And if you want to have some space between the elements then add
grid-gap: 10px;
I know I am kind of late, but I have been looking for solution for this in past hour or so, and I think I sort of figured it out. Put empty div
on the end of your container, and set flex-grow: 1
to it, and nothing else. Also set justify-content: space-between
on container, and don't use flex-grow
on other items. This will always make last line align left because this div will stretch through all remaining space.
However the problem of this is that it ALWAYS makes last line align left - even if it is the only line, which makes this solution unusable for me, but it might be usable for someone who can expect more than one line of items.