[w3ctag/design-reviews] WG New Spec: "flex-wrap:balance" (Issue #1227)

bfgeek created an issue (w3ctag/design-reviews#1227)

### Specification

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

### Explainer

https://github.com/bfgeek/flex-wrap-balance/blob/main/README.md

### Links

- The WG's request for this TAG review: 

???

- Previous early design review, if any:

N/A 

- An introduction to the feature, aimed at unfamiliar audiences:

https://github.com/bfgeek/flex-wrap-balance/blob/main/README.md#flex-wrapbalance-explainer

This allows developers to "balance" flex-lines, (similar to `text-wrap:balance`).

- A description of the problems that end-users were facing before this proposal:

https://github.com/bfgeek/flex-wrap-balance/blob/main/README.md#flex-wrapbalance-explainer

For a wrapping flexbox, developers would often be left with a single flex-item on the last line, which is often undesirable.

Developers were often working around this issue by converting a flexbox to inline-layout (to use `text-wrap:balance` instead), and making all the flex-items `display:inline-block`. This meant that they'd "lose" flexbox features limiting potential designs.

Other workarounds included:
 - Detecting when there were "orphans" on the last flex-line, then adding margin on an appropriate flex-item.
 - Bisecting via script the flexbox size.
 - Using media-queries/container-queries to hardcode margins to "balance".
 - etc.

Developers also rely on multi-col (see wikipedia "references" section in desktop mode). Developers can re-create this using flexbox, and `flex-direction: column; flex-wrap:balance; flex-line-count: 2;`. Balancing flexbox will generally be less overhead (less time spent within out) then multi-col helping low end devices significantly.

- Alternatives considered: 

https://github.com/bfgeek/flex-wrap-balance/blob/main/README.md#alternatives

There aren't too many other potential avenues; others were discussed but `flex-wrap:balance` is the most natural extension and what developers expect.

There is an extension point that is left unsolved at the moment (see: https://github.com/w3c/csswg-drafts/issues/13414#issuecomment-4101156045 ), but the current design doesn't constrain solving this in the future. (We'd need the `flex-line-count` property either way).

- Examples of how to use the proposal to solve the end-users' problems:

https://stackoverflow.com/questions/20729201/navigation-with-balanced-css-flex-wrap-containers
https://bsky.app/profile/yisibl.bsky.social/post/3m6jksgovdk2c
https://odland.dev/2024/12/22/web-wish-22-flex-wrap-balance.html
https://nerdy.dev/css-wishlist-2025#flex-wrap-balance
https://bsky.app/profile/una.im/post/3lpcjcjn4w22r
https://bfgeek.com/flexbox-image-gallery/

- What do the end-users experience with this proposal:

Joy that a 10+ year feature request is available on the web platform.

- User research you did to validate the problem and/or design, if any:

A lot of reading existing issues that developers were running into, and the various tricks they were using to try and solve this problem. Many developers came to a similar solution space.

- Web Platform Tests:

https://wpt.fyi/results/css/css-flexbox/balance
(they'll be there soon).


### The specification

- [x] Follows the [Web Platform Design Principles](https://www.w3.org/TR/design-principles/).
- [x] Includes Security and Privacy Considerations sections based on answers to the [Security/Privacy Questionnaire](https://www.w3.org/TR/security-privacy-questionnaire/).

### Where and by whom is the work is being done?

- GitHub repo:

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

- Primary contacts:
  - Ian Kilpatrick @bfgeek , Google Chrome, Implementor
  - Tab Atkins @tabatkins , Google Chrome, Specification Editor
 
- Organization/project driving the specification:

Google Chrome

- This work is being funded by:

Google Chrome

- Primary standards group developing this feature:

CSSWG

- Incubation and standards groups that have discussed the design:

CSSWG

### Feedback so far

- Active horizontal reviews: 

- Multi-stakeholder feedback:
  - Chromium comments: Supportive.
  - Mozilla comments: https://github.com/mozilla/standards-positions/issues/1405
  - WebKit comments: https://github.com/WebKit/standards-positions/issues/660
  - Developers: Supportive https://bsky.app/profile/una.im/post/3lpcjcjn4w22r (can provide more signal here if desired).

- Major unresolved issues with or opposition to this specification:

This not really a major issue but - see above wrt. "column-width" feature. Current solution space doesn't constrain in a negative way.
See: https://github.com/w3c/csswg-drafts/issues/13414#issuecomment-4172022385
> `RESOLVED: flex-line-count: <integer>, will work on rest later`

- Status/issue trackers for implementations:
  - https://chromestatus.com/feature/4547107962486784
  - https://bugzilla.mozilla.org/show_bug.cgi?id=2013454
  - https://bugs.webkit.org/show_bug.cgi?id=314423


### You should also know that...

This is a relatively small but highly requested additional to flexbox layout. Many web-developers have run into this problem over the years.

Flexbox Level 1 is a very stable spec, hence being added into Level 2.

<!-- Content below this is maintained by @w3c-tag-bot -->
---

Track conversations at https://tag-github-bot.w3.org/gh/w3ctag/design-reviews/1227


-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1227
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1227@github.com>