[Chris_Newton]

The items are governed by flexbox

Yes, but since you aren’t using any of the flex-related properties other than flex itself and wrapping, the layout you’re building isn’t substantially different from normal block-based layout and wrapping.

My point is that flex readily handles the use case you describe.

If we took your example and added some flex-specific behaviour, say justify-content:space-around, how could we readily left-align the final items with flexbox here?

Elsewhere in this subthread (5+4+4+4 distribution), you also deem flexbox incapable but I can think of how a frontend developer could make it work.

It’s difficult to discuss that when haven’t shown us what you have in mind. Would you like to elaborate?

Perhaps you are unintentionally looking for instances where flexbox cannot do something and then imposing constraints where flexbox is not an appropriate tool.

I would prefer to say that flexbox would be a more useful tool if it could also handle these finer details. There are numerous blog posts and SO questions about limitations in the current version of flexbox and how to work around them, so I think it’s fair to say that the challenges I’ve described here are not unusual.

[mistersquid]

> If we took your example and added some flex-specific behaviour, say justify-content:space-around, how could we readily left-align the final items with flexbox here?

I'm trying to think of an example where one would "justify-content:space-around" and want the last line to align left. Curious.

I agree flexbox has limitations but I don't see them in the examples you've provided thus far.

This is not much of an elaboration but the 5+4+4+4 I'm thinking along the lines of changing margin of nth children, or even specifically adjusting the CSS for the fifth child.

When developing front-end, I'm sure you would use the most appropriate tool for the design at hand. Flexbox even with its limitations is sometimes the best choice. I also agree it could use use refinements, but whatever refinements it needs aren't apparent to me in the examples you've described.

This may be a failure of my imagination.

[Chris_Newton]

I'm trying to think of an example where one would "justify-content:space-around" and want the last line to align left. Curious.

My original example would suffice. Given a large number of small charts to be displayed, typically all of the same size, it seems quite reasonable to want them to be evenly distributed and to adapt automatically to use the available horizontal space, but for an incomplete final line to fill from the left under the items in rows above. (Please remember that this is what was meant by aligning to the left in this context; we’re not talking about literally aligning on the left margin without reference to the extra space added by flexbox here.) The alternatives available with the current flexbox behaviour tend to be things like putting a single chart in the centre or putting two charts on the far left and far right with a possibly huge space between them, which inevitably leave the items in the last line looking arbitrarily placed and disconnected from the rows above.

This is not much of an elaboration but the 5+4+4+4 I'm thinking along the lines of changing margin of nth children, or even specifically adjusting the CSS for the fifth child.

But how do you know in advance which n you need? The primary advantage of flexbox in this sort of situation is that your many items will use up the available display width while also being neatly spaced. If you know your exact horizontal sizes in advance, you don’t really need flexbox at all for this kind of layout, since again you can just choose suitable margins and/or padding on your items and then rely on simpler layout tools like inline blocks.

[mistersquid]

Never mind flexbox, what generalized rule would yield 5+4+4+4 instead of 5+5+5+2?

Something like n rows have m items and the total number of items is (n * m) + 1. And you want the first (m+1)th item to be in row 1.

Yes, you’d be wasting your time with flexbox. You’d also be wasting your time complaining flexbox doesn’t support this.

To be clear, I don’t see a spec in any of the exceptions you’re carving, and you’re not providing one, just saying “flexbox can’t do this”.

You’re right. it can’t.

[Chris_Newton]

Never mind flexbox, what generalized rule would yield 5+4+4+4 instead of 5+5+5+2?

I’m not sure whether you’ve read my comments elsewhere in this discussion, but the short version is that this is about balancing the number of items in each row while not requiring any extra space compared to the naïve layout. Formally, the goal might be to minimise the maximum pairwise difference between the number of items in the rows, subject to not using more rows than the existing flexbox behaviour and keeping any longer rows earlier in the order. My earlier example assumed all items had the same size, but this isn’t a requirement for flex items and the balancing concept could be generalised by taking into account item sizes and flex settings instead of just looking at the counts.

Good typesetting can vary spacing and possibly hyphenation to give a balanced look to a paragraph, and somewhat complicated algorithms exist to do this well. It doesn’t seem an exotic requirement to have similar attention to detail in laying out flexed content in 2D, and it would certainly allow results that look better than what often happens today.

[mistersquid]

> Formally, the goal might be to minimise the maximum pairwise difference between the number of items in the rows, subject to not using more rows than the existing flexbox behaviour and keeping any longer rows earlier in the order.

I've not looked at your comments elsewhere in this discussion, but this makes sense as a specification.