flex-wrap: balance is like flex-wrap: wrap, but it balances rows to be roughly the same width.
This avoids awkward cases in wide layouts where a single or few items wrap to their own row, leaving lots of empty space.
How to use
balance is a new value to the flex-wrap property.
Since flex-wrap: wrap already exists, you must take care not to break browsers that don't support balance yet.
Option A: Override (Recommended)
A CSS rule with an unknown value is considered invalid and gets discarded by the browser.
Because of this, you can safely declare both wrap and balance in that order.
Browsers that support balance will use it (as it overrides the previous rule).
Browsers that support only wrap will drop the balance rule and fall back to wrap.
.example {
display: flex;
flex-wrap: wrap;
flex-wrap: balance;
}
Example: https://codepen.io/foobear/pen/EaZoLmP Show archive.org snapshot
Option B: Use @supports
To be more explicit, use an @supports query.
.example {
display: flex;
flex-wrap: wrap;
@supports (flex-wrap: balance) {
flex-wrap: balance;
}
}
This is also useful if you want to apply different structural rules when balancing is possible.
Browser support
At time of writing, only the latest Chrome and Edge (version 150) support this.
https://caniuse.com/mdn-css_properties_flex-wrap_balance
Show archive.org snapshot
Consider balanced flex-wrapping a progressive enhancement and just use it.
Currently, there seems to be no polyfill available. If balanced rows are essential for your application's appearance in all browsers, you need to come up with an alternative solution, likely using alternative layout techniques (like display: grid).
