5

We can specify the direction of the main axis with flex-direction property. But, from what I found, there is no property that would do the same for the cross axis.

It means that the only possible combinations are the following: (main axis is bold, cross axis is thin) flexbox axis directions

Is there any way to apply the other 4 possible arrangements? enter image description here

EDIT: assume that flex-wrap is set to wrap, so there are multiple rows or columns on the cross axis

EDIT2: thanks vals! setting flex-wrap to wrap-reverse does reverse the direction of the cross axis

Rustem Kakimov
  • 2,421
  • 20
  • 25

1 Answers1

5

The wrap-reverse value allows for this:

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

nowrap The flex container is single-line.

wrap The flex container is multi-line.

wrap-reverse Same as wrap.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

w3c source

Klesun
  • 12,280
  • 5
  • 59
  • 52
vals
  • 61,425
  • 11
  • 89
  • 138
  • How this answer can be correct if the question assume that `flex-wrap` is set to `wrap`? If we suppose that flex-wrap should be wrap, it can't be swapped to wrap-reverse. So the answer is not correct, or the question is not clear. – Mattia Astorino Jan 18 '18 at 20:30
  • @MattiaAstorino Clearly, the OP doesn't know about wrap. So, what he is saying is "I am wrapping the content". Also, from the docs, "wrap-reverse" = same as wrap. And also, this answer is marked as accepted, so for the OP at least it's ok. – vals Jan 18 '18 at 21:02