Intent to Ship: flex-wrap:balance

[Chromestatus]

Contact emails

ikilp...@chromium.org

Explainer

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

Specification

https://drafts.csswg.org/css-flexbox-2

Summary

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

Blink component

Blink>Layout>Flexbox

Web Feature ID

No information provided

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.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/3070

TAG review

https://github.com/w3ctag/design-reviews/issues/1227

TAG review status

Issues addressed

Goals for experimentation

None

Risks

Interoperability and Compatibility

Interoperability risk: Other browsers do not implement.

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1405)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/660)

Web developers: Positive (https://bsky.app/profile/una.im/post/3lpcjcjn4w22r)

Other signals:

Activation

Unlike other CSS features, this may be adopted incrementally by web-developers as it "gracefully degrades" if not supported. We saw this previously with `text-wrap:balance` for example.

Security

None.

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

Small CSS addition.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/css-flexbox/balance

Flag name on about://flags

experimental-web-platform-features

Finch feature name

FlexWrapBalance

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/416755656

Measurement

WebDXFeature::kFlexWrapBalance

Estimated milestones

Shipping on desktop	150
DevTrial on desktop	149
Shipping on Android	150
DevTrial on Android	149
Shipping on WebView	150

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4547107962486784?gate=6499348504117248

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67eae2d6.170a0220.8108a.099e.GAE%40google.com

This intent message was generated by Chrome Platform Status.