Re: [csswg-drafts] [css-flexbox-2] Add flex-wrap: dense (#3071)

So the simple version of my alternate proposal:

* `item-pack: dense` (or `flex-pack`, if we don't end up accepting the `item-*` proposal) triggers **dense flexbox packing** - every item, rather than being placed at the end of the last line, is instead placed at the end of the *first line the item can fit in*. This way, if a large item gets wrapped to the next line, leaving a decent amount of space behind, a small following item can scootch up and fill that space, rather than just having the remaining items get a ton of free space and flex really big.

* `item-slack: <length-percentage>` (or `flex-slack`) adds some "slack" to the flex linebreaking algorithm: items don't break to the next line unless they'd overflow by *more than the slack amount*, or if the flex line has no free space left. (So, if the slack amount is 50px, and the last item overflowed by 10px, a folllowing 30px item would still wrap to the next line, as the line is now "full", even tho it could theoretically fit in the slack amount.) This way, flex items will *slightly* shrink if necessary, to ensure a fuller packing.

* The two work together in the obvious way - if you're dense packing, it'll choose the first line that the item fits in *or overflows by less than the slack in*.

I think these better reflect the current behaviors of "dense" grid packing, and "slack" masonry calculation.

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


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

Received on Wednesday, 29 January 2025 01:35:34 UTC