Re: [csswg-drafts] [css-flexbox] Flex lines count (#13414)

Chatted with @bfgeek about this a bit more today.

Re: `column-width` + `column-count` comparison. I've *always* found `column-width`'s behavior weird, where the size you specify is *not* the size you'll actually get, but rather a *minimum* column size, and we'll actually grow the columns to make them snugly fit the container. `column-count` is similarly a bit limiting; it specifies an exact column count, but gives you no way to express a *minimum* or *maximum* number of columns. As written, we'd have to add either additional properties (`column-count-min`/`-max`) or additional syntax to `column-count` to achieve that. It would probably have made more sense initially to *just* have `column-count` and rely on math functions to do all these other things, except that math functions and unit division didn't exist at the time.

(Also, `column-count` doesn't accept length/percentages, so `round(down, 100% / 200px)` can't actually resolve as stated. That's addressed in the proposal below.)

-----------

So here's our proposal:

* Leave `flex-wrap: balance` as just the keyword, as already resolved.
* Add a `flex-line-count: <integer>` property.
* Add a new integer-returning function that calculates "how many lines can i squeeze into the available space?", only usable in `flex-line-count` and `column-count`. Provisionally call it `auto-fill( <length-percentage> )` - it evaluates to however many times you can fit the argument + gaps into the available space (the cross-axis size). %s resolve against the available space. Returns 1 if the available space is infinite.
 * If people want min/max counts, we can either tell them to use `clamp()`, like `clamp(2, auto-fill(100px), 5)`, or build it into the syntax directly like the Grid repeats, aka `auto-fill( <len-per> && <integer>{1,2}? )`. Ian and I are fine either way.
* When laying out flex items, the cross-axis available space is the line size (aka `full-available-space / line-count`, with gap subtracted) rather than the (today) full available space. (%s also rely on this divided space, as normal, and then are reevaluated, if necessary, after line sizing is fully determined, per existing rules.)


Open Questions:
1. How, exactly, do the lines size? Today, a `nowrap` flexbox's single line perfectly fills the flexbox, regardless of the size of the items. (You can observe this with `align-self:end` on an overflowing item.) A `wrap` flexbox's lines instead tightly wrap their contents. (Again, observable via alignment.)

 Balance is a third kind of wrap behavior. Today in Ian's prototype, the flex items get 1/N of the available space when sizing, so they'll *try* to fill the correct fraction of the space, but after that they act like `wrap`: a large item will still make its line bigger, and a bunch of small items will make the line smaller. In that latter case, `align-content` determines where the extra space goes, but none of the values try to keep the lines the *same* size.

 Outside of balance, how do we handle a line-count that produces empty lines with `wrap` or `nowrap`?

 Proposal: For `balance`, adopt Ian's current behavior. For `nowrap`, snugly fit the N lines (+gaps) into the available space, allowing items to overflow their lines if needed, guaranteeing all lines are the same size. For `wrap`, do the same thing as `balance`. We can address these sizing issues later if it proves necessary; whatever the solution is it won't change the properties proposed here.

2. Do we always preserve empty lines, or collapse them away? Wikipedia uses server-side code to switch their references section, usually two columns, to use only one column when there's only a few items in the list, which is an argument for 'collapse'. But authors could also want consistent line counts/sizes when repeating a component on a page with variable child counts, which is an argument for 'preserve'. Ian's prototype currently collapses.

 `nowrap` can't tell the difference between the two, assuming the filled lines don't change their size in response. `balance` and `wrap` definitely can tell the difference, but the existing `align-content` values don't treat the empty lines very well; they'll be *only* distributed extra space, so they'll typically be sized very differently from the filled lines (which have content size + distributed extra space).

 Proposal: Collapse empty lines away. Again, we can fix that in the future if it proves necessary, but the solution won't affect these properties being proposed today. (It'll either be a new property, or a new `align-content` value, or both.)

3. How does `nowrap` react to a >1 line count at all?
 
 Proposal: `nowrap` with a >1 line count *does* wrap as normal for all but the last line. The last line overflows if there are too many items.

4. How do we specify a reverse-filling balanced flexbox? Today, `wrap-reverse` is how you specify that lines should stack end-to-start. Should we add `balance-reverse`, or let `balance` be optionally combined with the `wrap-*` keywords?

 Proposal: Add `balance-reverse`, keep all the keywords exclusive. (We're fine with either.)

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13414#issuecomment-4101156045 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 20 March 2026 21:56:25 UTC