[css-flexbox-2] Add flex-wrap: balance;

[tabatkins]

We discussed having a flex-wrap:balance value, similar to text-wrap:balance, to even out the length of pre-flexed lines. We should add to level 2.

[Dan503]

I like the sound of this but can you add an example of what this would do?

Would it be a property that tries to place an equal number of flex items in each flex block at all times? That would be pretty awesome. 😊

[tabatkins]

Not necessarily equal number, but an equal sum-of-flex-basis, yeah. That way you don't end up with the frustrating scenario where you have twenty items, and nineteen of them fit on the first line, leaving a single lonely item flexing to fill THE ENTIRE SECOND LINE.

This luckily isn't cyclic layout; we already know all the flex basis values when we do linebreaking, as that's how we do it in the first place. We just need to attempt to balance the lines' sums, like text-wrap:balance does.

I'm not sure whether we want to specify the same algorithm, or just do something simple and trivial like "greedily consume until you've met or exceeded TOTALBASIS/LINES worth of flex-basis (or have filled the line), then break to next line". That won't always produce an ideal balancing, but it's super easy to spec and implement and test, and no perf impact since the only new information you need to collect is the sum of all basises, which you can collect while you're calculating all the basises, and then it's just a linear line-filling like normal.

In most normal cases, where items are all approximately the same width, tho, it'll balance quite well.

[Dan503]

Thank you!

I ran into this issue constantly when flexbox first came out. Let's say I was making a layout with 3 equal width columns. I really loved how adding flex-grow: 1; to all the list items would mean having 1 item lead to 1 full width column. 2 items would lead to 2 equal width columns. 3 items leads to 3 equal width columns. But then if you have 4 items, you have 3 equal width columns but the last item is full width. ☹

This makes the last item look visually far more important than all the previous items. It's not supposed to look any more important than the others though.

Idealy, having 4 items would lead to 2 equal width columns and 2 rows.

Because of this issue, I just stopped trying to use this technique and just let the items not fill the entire container. 😢

[yisibl]

What we can do now seems to be to add empty elements at the end and set them to the same width.

Demo: https://codepen.io/yisi/pen/ZGYNwG

It is hoped that the specification can be added as soon as possible.

[SelenIT]

@yisibl for your case, the Grid layout seems to be a better option, as it preserves the horizontal rhythm of the lines automatically. But this issue is about the different case, more like creating layouts like this without manually writing scary CSS selectors for each number of items...

[Dan503]

@SelenIT I like that in your example when there are an odd number of items that don't divide well into each other it is the later rows that are given the extra items rather than the earlier items.

Earlier items are more likely to be more important. There should probably be a property to define if odd items fill more toward the start middle or end though for more design options.

[yisibl]

@tabatkins Are there any plans to launch Flexbox2?

[johannesodland]

When balancing line breaking with items of equal width there will be multiple optimal solutions. The algorithm could prioritise full rows in the start, center or in the end of the container.

The example @SelenIT gave prioritises fuller rows in the end of the container, so that the first items grows more when using flex-grow:

more like creating layouts like this

Would it be possible to provide control over how the algorithm would balance items?
I.e. have something like a separate flex-wrap-balance property with possible values none, start, center or end?

[matthew-dean]

I presume CSS Grid will get a similar value? If so, should it just be called wrap-balance?

[Loirooriol]

#9102 is discussing moving balance out of text-wrap, not sure if flexbox should be consistent with the decision there or have the discussion independently.

[proimage]

Does this proposed feature also take into consideration situations where the individual flex children don't expand their widths beyond a certain fixed amount? In other words, situations where justify-content: space-[around|evenly|between]; comes into play?

[manuelmeister]

I would love to see this on the csswg agenda.

[Anoesj]

This would be fantastic!

[mayank99]

Would the addition of a flex-wrap: pretty also be tied to this issue?

Unlike balance, the pretty value would be mainly concerned with minimizing orphans (rather than making the rows completely balanced).