Skip to content

Support flex-wrap: balance and flex-line-count (CSS Flexbox Level 2) - #717

Open
nicoburns wants to merge 6 commits into
mainfrom
devin/1786712463-flex-wrap-balance
Open

Support flex-wrap: balance and flex-line-count (CSS Flexbox Level 2)#717
nicoburns wants to merge 6 commits into
mainfrom
devin/1786712463-flex-wrap-balance

Conversation

@nicoburns

@nicoburns nicoburns commented Aug 14, 2026

Copy link
Copy Markdown
Member

Summary

Adds end-to-end support for CSS Flexbox Level 2 line balancing: flex-wrap: balance (and wrap-reverse balance) and the flex-line-count property, per https://drafts.csswg.org/css-flexbox-2/.

  • stylo_taffy::convert::flex_wrap maps Stylo's new FlexWrap::Balance/WrapReverseBalance to taffy::FlexWrap::Balance/BalanceReverse, and TaffyStyloStyle implements FlexboxContainerStyle::flex_line_count() (clamped to >= 1). Gated behind a new on-by-default flexbox_balance cargo feature on stylo_taffy.
  • blitz-dom enables the layout.flexbox.balance Stylo pref at document init, so the new syntax parses in Blitz.
  • Taffy is now pinned to an upstream main rev (20f04b9f) that includes the merged balancing implementation (Implement flex-wrap: balance (CSS Flexbox Level 2) taffy#1105); Stylo is pinned to the head of the Stylo PR branch (Implement flex-wrap: balance and flex-line-count (CSS Flexbox Level 2) stylo#12, rev 404505d5). The Stylo git rev should be switched to a release once that PR merges and is released.
  • Adds focused layout tests (tests/blitz-tests/tests/flex_wrap_balance.rs): four 25px items in a 120px container with 10px gaps split 3/1 with wrap but 2/2 with balance; plus wrap balance, wrap-reverse balance, invalid nowrap balance, and flex-line-count forcing extra lines.

WPT css/css-flexbox/balance: 32/41 run tests pass. The 9 failures are preexisting limitations (7 need script execution which the WPT runner doesn't support, 1 needs width: min-content on atomic inline boxes, 1 needs display: -webkit-box).

Rendered verification (wrap 3/1 vs balance 2/2, wrap-reverse balance, flex-line-count: 2):

balance demo

Link to Devin session: https://dioxus.staging.devinenterprise.com/sessions/b7bd5b365d054b87a6053872323832b2
Requested by: @nicoburns

WPT results

28 newly passing, 0 newly failing (net +28).

Full diff (28 changed tests)
+ Fail => Pass css/css-flexbox/balance/balance-001.html
+ Fail => Pass css/css-flexbox/balance/balance-002.html
+ Fail => Pass css/css-flexbox/balance/balance-003.html
+ Fail => Pass css/css-flexbox/balance/balance-005.html
+ Fail => Pass css/css-flexbox/balance/balance-available-size-001.html
+ Fail => Pass css/css-flexbox/balance/balance-available-size-002.html
+ Fail => Pass css/css-flexbox/balance/balance-complex.html
+ Fail => Pass css/css-flexbox/balance/balance-flex-grow.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-001.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-003.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-004.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-005.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-006.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-007.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-001.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-002.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-003.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-004.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-005.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-006.html
+ Fail => Pass css/css-flexbox/balance/balance-negative-margin-001.html
+ Fail => Pass css/css-flexbox/balance/balance-negative-margin-002.html
+ Fail => Pass css/css-flexbox/balance/balance-percentage-size-001.html
+ Fail => Pass css/css-flexbox/balance/balance-percentage-size-002.html
+ Fail => Pass css/css-flexbox/balance/balance-start-bias-001.html
+ Fail => Pass css/css-flexbox/balance/balance-start-bias-002.html
+ Fail => Pass css/css-flexbox/balance/balance-start-bias-003.html
+ Fail => Pass css/css-flexbox/balance/balance-zero-size.html

Generated by the WPT workflow.

Points taffy at the flex-wrap-balance branch and stylo at the branch
implementing the new property values, maps the new FlexWrap variants to
taffy's Balance/BalanceReverse, plumbs flex-line-count through, and
enables the layout.flexbox.balance pref.
@staging-devin-ai-integration

Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant