Web Wish 22: Flex-Wrap Balance

When using flexbox to layout items in multiple rows, you easily end up with only one or a few items on the last row. All the remaining space is distributed to the last row.

Illustration of a flex container with 10 items. It has three rows with three items each, and the fourth row has a single item
A flex-container with no balancing.

If you're also using flex: auto on the items to make them fill the entire row, the items on that last row can end up awkwardly large.

Illustration of a flex container with 10 items. It has three rows with three items each, and the fourth row has a single item. The items are stretched to fill the entire row, making the last item as wide as the container.
A flex-container with no balancing and `flex: auto` on the items. The item on the last row is ends up filling the entire width of the container.

What if we could control this, similarly to how we control text wrapping with text-wrap: balance?

Then we could ensure a more even balancing, and that the last row does not end up with a single item.

Illustration of a flex container with 10 items. It has four rows in total. The first two rows contains three items each, while the remaining two rows contain two items each. The items are stretched to fill the entire row.
A flex-container with balancing.

But, there's room to improve!

A normal pattern is to give the first items in a layout some extra focus. What if we could control how the wrapping algorithm distribute the extra space? Then we could control whether the remaining space would be distributed towards the start or the end of the cross axis.

Illustration of a flex container with 10 items. It has four rows in total. The first two rows contains two items each, while the remaining two rows contain three items each. The items are stretched to fill the entire row.
A flex-container with balancing and control over distribution of the free space.

This would help immensely when setting up a product page or an image gallery.

For Christmas, I'm hoping the CSS working group will resolve to specify flex-wrap balancing.

Relevant issues and PRs: