Direction
Set the flex axes to control the item direction
How to use
Place the class on the flex parent element to set the main and cross axes.
| Class | Declaration | Usage |
|---|---|---|
| flex-dir-row | flex-direction: row; |
Parent Sets the main axis to horizontal, from left to right. Makes the cross axis vertical. This is the default. |
| flex-dir-row-rev | flex-direction: row-reverse; |
Parent Sets the main axis to horizontal, from right to left. Makes the cross axis vertical and reverses the position and order of the flex children. |
| flex-dir-col | flex-direction: column; |
Parent Sets the main axis to vertical, from top to bottom. Makes the cross axis horizontal. |
| flex-dir-col-rev | flex-direction: column-reverse; |
Parent Sets the main axis to vertical, from bottom to top. Makes the cross axis horizontal and reverses the position and order of the flex children. |
Examples
Row / default
A
B
C
<div class="bg-gray4 paxs flex flex-dir-row">
<div class="examplebox">A</div>
<div class="examplebox">B</div>
<div class="examplebox">C</div>
</div>Row reverse
A
B
C
<div class="bg-gray4 paxs flex flex-dir-row-rev">
<div class="examplebox">A</div>
<div class="examplebox">B</div>
<div class="examplebox">C</div>
</div>Column
A
B
C
<div class="bg-gray4 paxs flex flex-dir-col">
<div class="examplebox">A</div>
<div class="examplebox">B</div>
<div class="examplebox">C</div>
</div>Column reverse
A
B
C
<div class="bg-gray4 paxs flex flex-dir-col-rev">
<div class="examplebox">A</div>
<div class="examplebox">B</div>
<div class="examplebox">C</div>
</div>