Re: [csswg-drafts] [css-flexbox] apply flexibility in steps (#4198)

Wanted to create a similar issue, but found this via search, so would write here.

This is a very common pattern for any kinds of toolbars, where we never want to shrink items proportionally, but want to shrink them sequentially, very often in one of two directions.

https://user-images.githubusercontent.com/177485/231518983-cc54cc91-4951-4b3b-927c-0accbed1e106.mov

Here is the codepen that I wanted to attach to my issue: https://codepen.io/kizu/pen/wvYKROW?editors=1000
The second example in it is basically the same @Wes0617 provided, the first one is an attempt to make it usable with any number of elements, but which requires a unnecessarily cumbersome HTML structure.

I would really want to get this features, as there are no real alternatives for it, especially when we want to have the HTML as neat as possible.

In my practice, while it would be nice to have the separate `shrink-order` and `grow-order`, I would want to have something like `grow-direction` and `shrink-direction` with values like `start-end` and `end-start` or whatever, where it would override the default shrinking/growing to work sequentially with implicit order determined by the DOM order. This way the example like in my CodePen could be made to work with any number of elements, without a need to set a `shrink-order` on each of them via something like `:nth-child`. 


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


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

Received on Wednesday, 12 April 2023 16:15:38 UTC