[Chris_Newton]

I’m not sure I’d go quite that far. Flexbox is good for some types of layout, but it’s frustrating how often it gives you most of what you want but then there is no tidy way to get the final details right.

For example, I was recently implementing a “small multiples” layout, showing many small charts of the same type, with the exact number depending on context. This seems like an ideal use case for flexbox: you can make good use of your available screen width, with everything lining up neatly, even spacing, but still wrapping to extra rows as needed.

Alas, it doesn’t always work quite like that. For example, suppose that we have a display that is wide enough to fit five items and we have 16 items to show. I don’t really want a layout with 5+5+5+1 items; using 4+4+4+4 would look much neater, without needing any more space. Unfortunately, while typographers have been wrangling with this sort of problem for a long time, flexbox doesn’t have any awareness of it at all.

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. With most settings for justify-content, my lonely last item is going in the centre of its row, whether I want it to or not. Even worse, if I add another item, the two on that final row will be correctly spaced according justify-content within their own row in isolation, but that isn’t necessarily going to align at all with the columns of items on the rows above.

These kinds of limitations do significantly reduce the usefulness of flexbox, IMHO. With CSS grids also now widely supported, I find there aren’t actually that many situations where flexbox is the best tool for the job.

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

[somebodynew]

I run into this problem constantly, but I've never come to a universal solution that could be standardized for general use as a new flexbox CSS property. It would be nice to be able to indicate that rows should have the same number of items (except the last row), the last row should be as full as possible even if it means using a different size for the other rows, and the items on the last row should be aligned as if the row was filled after them.

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