Flexbox 3 - Flex Direction

To change the order of flex items use the flex-direction property. It controls both main and cross axes. Reversing the flow reverses the axis, so start becomes end. If the flex-direction is column justify-content changes to the vertical and align-items to the horizontal

1
2
3

3-1. flex-direction : row;

1
2
3

3-2. flex-direction : row-reverse;

1
2
3

3-3. flex-direction : column;

1
2
3

3-4. flex-direction : column-reverse;