- From: Ian Kilpatrick via GitHub <sysbot+gh@w3.org>
- Date: Wed, 21 May 2025 21:45:44 +0000
- To: public-css-archive@w3.org
> @bfgeek do you have any concrete proposal in mind? Somewhat concrete. :) We have an experiment in Blink which is more or less[1] feature complete as of 138.0.7192.0 The syntax I've initially added is: `flex-wrap: nowrap | [ [ wrap | wrap-reverse ] || balance <integer [1,∞]>?]` Some valid syntax: - `flex-wrap: balance` - `flex-wrap: balance 3` - `flex-wrap: wrap balance` - `flex-wrap: wrap-reverse balance 2` The feature more or less works as one would expect. The engine when performing flex line-breaking it typically does so in a greedy manner based off the _hypothetical main size_ (e.g. if the next item exceeds the line-break size produce a new line). When balancing you balance using the same size. I suspect we want to leave _how_ to balance up to implementations, similar to `text-wrap: balance` which also has a few different approaches on how to implement. There are a few important nuances when implementing. Most "fast" algorithms for balancing rely on a monotonic scoring function for a line. E.g. when you add an item to a line, the score should **always** decrease. This is typically true except when negative margins are present. We'd like to allow (but not require) clamping the _hypothetical margin-box main-size_ to zero in this scenario. This is important to guarantee a performance floor (and practically doesn't change things in a significant manner). The number in the syntax (e.g. `flex-wrap: balance 3`) specifies a "minimum number of lines". This is particularly important for column wrapping flexboxes, as they typically don't have a height constraint, and otherwise would always produce one line. (Internally for this to work we first bisect a line-break size which would produce the minimum number of lines, then run the balancing algorithm on that). One subtlety with the "min-lines" feature is when measuring flex-items (to produce the _hypothetical main size_) is that it produces better results if you divide the available-size by the minimum number of lines (instead of just using the whole content-size if available). cc/ @tabatkins [1] Some things are missing I'm still doing some performance experiments, and max-content inline-size is incorrect the "min-lines" case. -- GitHub Notification of comment by bfgeek Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3070#issuecomment-2899320836 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 21 May 2025 21:45:44 UTC