This property is used to specify direction of elements in a flexbox container or it define the placement of elements in a flexbox container. it uses four basic values to direct elements
row- this will arrange elements from left to right horizontally
row-reverse- this will arrange elements from right to left horizontally
column- this will arrange elements from left to right vertically
column-reverse- this will arrange elements from right to left vertically
Row
Example
Box 1
Box 2
Box 3
Box 4
Box 5
row will display all elements in a single row in increasing order or from left to right.
Row Reverse
Example
Box 1
Box 2
Box 3
Box 4
Box 5
row-reverse will display all elements in a single row but in decreasing order or from right to left.
Column
Example
Box 1
Box 2
Box 3
Box 4
Box 5
column will display all elements in increasing order or from left to right.
Column Reverse
Example
Box 1
Box 2
Box 3
Box 4
Box 5
column-reverse will display all elements in decreasing order or from right to left.
Flexbox Code Generators
Try our Flexbox generators to practice and generate Flex code in real time.