Menu
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)
Is there any way to apply the other 4 possible arrangements?
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
385
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.
Reverse the display of the items the flex-direction property can take one of four values: row. column. row-reverse.
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.
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.
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
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
