[ht85]

For the 5+5+5+1 example, there is a fairly easy way to accomplish that:

Append n dummy items to your list, where n is the maximum number of items you expect on a single line. They should have a height of 0, and the same width / margin as your regular items.

The "2D justification" where items occupy space intelligently would be awesome, but I doubt CSS will ever allow that.

[city41]

You can also use grid layout with `repeat(auto-fill, size)` it behaves very similar to wrapping in flex box, except when it wraps, the items still conform to the column specification

[Chris_Newton]

Sure, there are various workarounds for the left justification problem, but none of the ones I know is attractive. Anything based on adding extra items defeats one of the main advantages of flexbox, which is that you don’t need to know in advance how many items per line will fit and if the user resizes their browser then the layout will automatically adapt. Anything based on using :after to fill the space on the final line only works if you’re left-aligning everything with no space outside.

I think what is really needed here is an extra property specifying how to handle the last row (or column for vertical flex) of the layout that is separate to the normal justify-content property but takes the positions of items in the preceding rows (columns) into account, roughly analogous to the subgrid concept for CSS grids.

I don’t think the “2D justification” problem would be that difficult to solve either. Again, it just needs a single extra property, in this case to specify whether and how to balance item counts across all rows (or columns, depending on flex direction). A simple approach would just repeatedly shorten all of the preceding rows by one item and add the same total number of items to the final row until doing so again would make the last row longer than the rest. Then redistribute the horizontal space throughout according to the normal justification, which at least minimises the difference between the number of items in the final row and the rest without needing any extra space for the overall layout.

A slightly more sophisticated treatment might offer a third option that can shorten more than just the final row, distributing any difference in item counts over multiple rows instead. For example, 5+5+5+2 would become 5+4+4+4. In this way, you would at worst have a set of earlier rows and a set of later rows where the item counts differed by no more than 1. Presumably you would also then apply the final row justification property imagined above to all rows in the later set, if you don’t have the same number of items in all rows.

Maybe in the future we’ll see a Flexbox Level 2 spec that addresses issues like these, just as subgrid is coming with level 2 of the grid layout spec.

[Chris_Newton]

I lost a paragraph above. There was supposed to be a final version of the balancing behaviour that considered not just item counts but space used and flex behaviour for each item, adjusting breaks over the whole flex container in a similar way to Knuth-Plass justification of a text paragraph. There was also an observation that this made the layout algorithm much more complicated and might be going too far down the rabbit hole. :-)