[css-flexbox]: flex-direction: what about "bustrophedon" rows and columns??

[php4fan]

For flex-direction we have these possible values:

row | row-reverse | column | column-reverse

There's an obvious need for "bustrophedon"-like values. I have no idea how they should be called, but there should obviously be four more values. I'll use made-up names:

• row-alternate: rows, the first row as in row, the second as in row-reverse, the third again as in row, etc.
• row-alternate-reverse: same but starting with as in row-reverse
• column-alternate: columns, the first column as in column, the second as in column-reverse, etc.
• column-alternate-reverse: same but starting as in column-reverse

I can't believe these don't already exist.

[tabatkins]

What is the "obvious need"? Can you give any examples of this sort of layout in existing displays?

(Your wording makes me suspicious that you're trolling, which is against the W3C CoC.)

[php4fan]

Can you give any examples of this sort of layout in existing displays?

So for you to see that something is useful you need to see examples of it already been used? No wonder the development of CSS is so slow.

I haven't looked for existing examples, but I did google for ways to achieve it and it's a very commonly asked question.

Here's a trivial use case. Say I want to make a gallery of photos of people and there are more than one picture per person (not a fixed amount of pictures per person). I want photos of the same person to be close to one another, so the photos will be ordered like A1, A2, B1, B2, B3, C1, D1, D2.... where Xn is the n-th photo of person X. Depending on the width of the container, there may be more or less pictures per row, so you can end up with the last picture in a row and the first picture in the next row belonging to the same person, but they'll be far apart because of the row break. If only I could have them arranged in a "bustrophedic" fashion, the first photo in a row would always be just below the last photo in the previous row. Like this:

A1 A2 B1    >>>
C1 B3 B2    <<<
D1 D2       >>>

[Alohci]

Here's 3 stackoverflow questions asking for this pattern:

• https://stackoverflow.com/questions/47091822/flexbox-alternate-row-and-row-reverse-according-to-rows-number
• https://stackoverflow.com/questions/77083014/how-do-i-change-the-direction-of-every-other-row-in-a-wrapped-row-flex-contain
• https://stackoverflow.com/questions/59481712/how-can-i-reverse-flexbox-direction-on-wrap-to-achieve-snake-wrap

[tabatkins]

So for you to see that something is useful you need to see examples of it already been used? No wonder the development of CSS is so slow.

For you to interact with people in this group, you need to abide by our Code of Conduct. This sort of comment is not in line with our expected behavior.

---

But yes, there is a finite number of people in this group, and a finite number of people working on browsers, so there is a finite amount of work we can achieve. Taking on new work is something that requires sufficiently compelling justification, and "people are already doing this, or are commonly trying to do this" is a good argument for such.

For example, the links provided by @Alohci are great. This does look like something that authors might be trying to commonly do. (And it's definitely impossible to do right now, which is another point in favor of it - if authors don't have a workaround, it raises the importance of allowing it in the spec.)

[Link2Twenty]

This is possible with a little bit of creative grid work. Though is does require a little bit of JS (because we can't calc on a counter).

Alternatively, if you're doing server side rendering, you can add the index of each item at that stage removing all JS.

https://jsfiddle.net/link2twenty/afvkL94z/

[php4fan]

This is possible with a little bit of creative grid work. Though is does require a little bit of JS

Well yeah, anything is possible in JS. You could achieve grids with no CSS grid with JS using just absolute positioning for that matter.