[css-flexbox] new flex wrap value that changes the flex direction

[manuelmeister]

I couldn't find a way to style parent & child, so that it behaves like Version 1 & 3 depending on the content:

The content is unknown, could be "A", "B" & "C" or "A", "B" & "VERYLONG", … could be more than 3 elements. This eliminates media width queries.

I thought of something like this:

body {
  max-width: 200px;
}

container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: direction;
}

[Loirooriol]

So if the items don't fit into the row, it changes into column direction. But what if they don't fit into the column either? Do they wrap into a 2nd column?

[manuelmeister]

Do they wrap into a 2nd column?

I don't think so. It would only change the flex direction from row to column and from column to row. There would only be two possible new values for flex-wrap: direction and direction-reverse.

Further behavior would probably be too complicated.

[mgrsskls]

I have a (for me) very common use case for that as well: I often have a horizontal navigation in a footer with an undefined amount if links in there. What I usually want then is that as soon as the first link does not fit into the row anymore, I want the navigation to become a column.

Using flex-wrap: wrap would be ideal for me here, but instead of wrapping only the element that does not fit, I want all elements to wrap. I had initially thought of something like flex-wrap: wrap all.

[devongovett]

Would be amazing to be able to do this in pure CSS. Our Button Group component in Spectrum swaps orientation from horizontal to vertical when space is limited, and we currently have to implement this with some tricky JavaScript. However this has the downside that the initial layout is potentially incorrect on page load before the JS has executed. I agree with the previous commenters that an extension of flex-wrap seems like the simplest solution.

[devongovett]

Related: https://ishadeed.com/article/flex-wrap-detect/. This proposes a :wrap pseudo-class to detect when a flex container wraps. Not sure if that's possible for similar reasons as :stuck, but it has some good examples of the kinds of problems that often need to be solved. There are numerous stack overflow questions about this as well.

[Loirooriol]

Yes :wrap is circular:

.flexbox:wrap {
  flex-wrap: nowrap;
}

[spartanatreyu]

Some developers are getting around the lack of flex-wrap detection using the albatross hack (pictured here):

Here's the initial post describing the first albatross hack and the problem it solves: https://heydonworks.com/article/the-flexbox-holy-albatross/

Here's the follow-up post showing the simplified albatross hack: https://heydonworks.com/article/the-flexbox-holy-albatross-reincarnated/

And here's a separate post breaking down the albatross hack, how it works, extending it, and it's limitations: https://snook.ca/archives/html_and_css/understanding-the-flexbox-albatross

If the circular issue can be resolved, a :wrap pseudo-class / flex-wrap: wrap all extension / container state wrap query or other similar solution would remove the need for the albatross hack and it's limitations.