web-platform-tests / web-platform-tests/interop

flex-wrap: balance

Open
#1,350 1 comment 64 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

focus-area-proposal
Dominant language
JavaScript
Stars
524
Forks
35
Avg merge
1d 4h
Merged PRs (30d)
10

Description

Description

When items are wrapping onto multiple lines, flex-wrap:balance distributes the content in a way that appears more balanced.

A good overview of this feature can be found here.

Ideally the scope would also include flex-line-count. I guess it’s too early to include max-content-sizing: shrink-to-fit, but I do hope something like that is able to ship soon.

Specification

https://drafts.csswg.org/css-flexbox-2/#flex-wrap-property

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/flexbox-flex-wrap-balance/

Test Links

No response

Additional Signals

This Bluesky post has 768 likes.
This Tweet has 469 likes.

Webkit standards position: no position
Mozilla standards position: positive

Firefox bug
Chrome and Edge have supported this feature since 150.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the CSS Flexbox 2 flex-wrap specification and the linked web-feature entry; no test file is named, so locate the relevant web-platform-tests flex-wrap coverage. Confirm the intended scope before including flex-line-count. Done means adding tests that verify balanced wrapping behavior across the supported cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
testing, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.