Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to reverse flexbox cross axis direction? [duplicate]

Tags:

css

flexbox

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

like image 385
Rustem Kakimov Avatar asked Jan 18 '18 12:01

Rustem Kakimov


People also ask

Can I use flex-direction row-reverse?

Using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader.

How do you reverse something in flexbox?

Reverse the display of the items the flex-direction property can take one of four values: row. column. row-reverse.

Does Flex-direction change main axis?

Setting flex-direction to row or row-reverse sets the main axis along the row in the inline direction. Setting flex-direction to column or column-reverse sets the main axis from the top of the page to the bottom in the block direction.

What gets reversed when using the flex wrap wrap reverse option?

The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start. wrap-reverse. Behaves the same as wrap but cross-start and cross-end are permuted.


1 Answers

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

like image 85
vals Avatar answered Sep 30 '22 05:09

vals