flex-wrap: balance

[o-t-w]

Description

When items are wrapping onto multiple lines, flex-wrap:balance distributes the content in a way that appears more balanced.

A good overview of this feature can be found here.

Ideally the scope would also include flex-line-count. I guess it’s too early to include max-content-sizing: shrink-to-fit, but I do hope something like that is able to ship soon.

Specification

https://drafts.csswg.org/css-flexbox-2/#flex-wrap-property

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/flexbox-flex-wrap-balance/

Test Links

No response

Additional Signals

This Bluesky post has 768 likes.
This Tweet has 469 likes.

Webkit standards position: no position
Mozilla standards position: positive

Firefox bug
Chrome and Edge have supported this feature since 150.

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature flex-wrap: balance

• ID: flexbox-flex-wrap-balance
• Name: flex-wrap: balance
• Description: The flex-wrap: balance CSS declaration distributes items in a multi-line flex container such that each line has about the same number of items.
• Baseline status: Limited Availability
• Developer signals: 4 votes (details)
• More information: See the web-features explorer