[csswg-drafts] Change flex direction, after the flex container wraps (#8153)

manuelmeister has just created a new issue for https://github.com/w3c/csswg-drafts:

== Change flex direction, after the flex container wraps ==
I often come across the requirement to grow a flex item, but only If the flex container wraps:

<img width="400" alt="Two states: 1. single line wide flex container with space between the two items. 2. two lines and both flex items grow to full width" src="https://user-images.githubusercontent.com/3001985/204753313-a85f2457-3399-4124-b038-e51e77169622.png">

Usually this comes up with buttons (e.g. submit & cancel) that should be full width, if they are not on one line.

Both currently possible "workarounds" are not desired:
<img width="400" alt="Two possible but not desired workarounds: 1. Flex grow on the items at all times/breakpoints. 2. Non-grow flex items, one on the left and one on the right on a separate line" src="https://user-images.githubusercontent.com/3001985/204753343-6be72ab2-9934-4418-af0c-8b0974541739.png">

Also if there are more than two items. Then it should wrap as well.
<img width="400" alt="Bildschirmfoto 2022-11-30 um 10 15 39" src="https://user-images.githubusercontent.com/3001985/204755720-d355e40f-9c67-4d4c-b7b9-e708e957fb83.png">

I think one way to solve this could be:
```css
flex-wrap: wrap-column;
/* or probably better */
flex-wrap: wrap-direction;
```

This would make the direction of the flex container change upon wrap.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8153 using your GitHub account


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

Received on Wednesday, 30 November 2022 09:22:01 UTC