[mistersquid]

> OK, so I have to live with 5+5+5+1 for now if I want to use flexbox. In that case, it would be nice to control the justification of the final line, for example having additional items lining up under the left-most columns above them. Unfortunately, this also isn’t something that flexbox supports.

My understanding of this description may be incorrect. If not, this is supported in flexbox.

This pen is editable so the HTML list can contain 16 items (5+5+5+1) and I think it works for what you're describing. [0] [1]

[0] https://www.w3schools.com/css/tryit.asp?filename=trycss3_fle...

[1] https://imgur.com/a/Cr8WAmY

[Chris_Newton]

You’re not really doing any flexing in that example, though, so I’m not sure why you would need flexbox at all there. If you start using the justification options then unfortunately things get more difficult.

[mistersquid]

> You’re not really doing any flexing in that example, though, so I’m not sure why you would need flexbox at all there.

The items are governed by flexbox and adding, for example

  > align-items: flex-end;

to the container would readily demonstrate this. (Think class added on some user interaction.) The old way of doing this would be using float.

My point is that flex readily handles the use case you describe. 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.

Perhaps you are unintentionally looking for instances where flexbox cannot do something and then imposing constraints where flexbox is not an appropriate tool. However, if you think in terms of flexbox, some of these scenarios actually have handy and elegant solutions.

YMMV

[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.