Web developers often use multi-line flexbox to allow content to gracefully wrap when there isn’t enough space.
Below is a non-wrapping flexbox, which doesn’t have enough space to fit all its items.
Applying flex-wrap: wrap allows content to be on an additional line without overflow.
Typically items are also flexed so that they take up the entire space.
This however makes the layout of the page look “unbalanced” or “off-kilter”.
Typically a more desirable rendering would be:
And with flexing applied:
There are a few different possibilities for how to solve this however the best is likely to add flex-wrap: balance to trigger this line balancing behaviour.
See: w3c/csswg-drafts#3070
Concretely this would use a Knuth-Plass style line breaking algorithm on the flex-items hypothetical main-size.
This could be potentially exposed as another property (flex-line-style?) if the flex-wrap wanted to keep its “on”/”off” behaviour. E.g. a valid syntax would need to consider how to trigger the flex-wrap: balance wrap-reverse behaviour.
Another option might be to expose properties to directly control line-breaking within flexbox, but this seems complementary (forcing a break after a particular flex-item).
Given text-wrap: balance exists, flex-wrap: balance seems like the most natural extension.
This adds a potentially expensive step to flex layout. So we’d like to keep the performance O(Nlog(N))-ish . This is no worse than the potential sort that needs to occur when order is set on flex items for example. (Naive algorithms are O(N*N) ).
A simple optimization that we expect to implement is if all the items are the same size.
The above proposal works for row flexboxes as we typically know the inline-size ahead of time. However it doesn’t really work for most realworld column flexboxes as we don’t know the block-size ahead of time. E.g. We are line-breaking with no limit on how large the line can be.
A first extension point would be to add a minimum number of lines.
- As a function:
flex-wrap: balance(2). - As part of the property
flex-wrap: balance 2.
Today people use multi-column layout to achieve this effect column-count: 2 (e.g. wikipedia.org) so while not as critical a usecase to solve, provides people an alternative.
(Note wikipedia uses something like column-width: 20em however it's not obvious that using a length is the best approach within flex layout. This length is just being used to determine the number of flex-lines, and not actually sizing the flex-lines themselves, IMO this could create confusion).
Implementation wise it's difficult to add this functionality directly to a Knuth-Plass style line breaking while keeping performance guarantees - so we expect we’ll bisect to a length which gives the appropriate number of lines, then run the Knuth-Plass line breaking with that line-break length.