flex-wrap:balance

Category: CSS
Type: New or changed feature
Status: Proposed (Chrome Proposed)
Intent stage: None

Summary

flex-wrap:balance allows developers to distribute content between flex-lines so that it appears more balanced (similar to text-wrap:balance).

Motivation

Without balancing it is trivial to create flex-lines which appear "unablanced" (lots of whitespace in a particular line). This often makes developers avoid wrapping flexboxes, instead allowing content to overflow. See explainer.

Standards & signals

Specification: https://drafts.csswg.org/css-flexbox-2
Firefox: No signal
Safari: No signal
Web developers: Positive
Tracking bug: https://issues.chromium.org/issues/416755656

Explainers: https://github.com/bfgeek/flex-wrap-balance

View on chromestatus.com