[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;
}