flex-direction

Flex Direction The flex-direction property specifies the direction of the flexible items inside the flex container. row; The default value of flex-direction is row (left-to-right, top-to-bottom). row-reverse; The flex items will be laid out right to left. column; The flex items will be laid out vertically. column-reverse; Same as column, but reversed. 🛑 if you change the direction of the page in the Page Properties to right-to-left (rtl) then all directions will be reserved.

flex-direction

This is the property that allows us to define our main axis. Remember I mentioned that our main axis can be horizontal or vertical. So if we want the main axis to be horizontal, that's called row. And if we want it to be vertical, that's called column. Also, remember we had a main start and main end. We simply add a reverse suffix to set our "main start" in the reverse direction. Pretty cool 👍

.parent {
  flex-direction: row /* default */
               or row-reverse
               or column
               or column-reverse
}

Flex Direction

The flex-direction property defines in which direction the container wants to stack the flex items.

• The column value stacks the flex items vertically (from top to bottom):

.flex-container { 
display: flex; 
flex-direction: column; }

• The column-reverse value stacks the flex items vertically (but from bottom to top):

.flex-container { 
display: flex; 
flex-direction: column-reverse; }

• The row value stacks the flex items horizontally (from left to right):

.flex-container { 
display: flex; 
flex-direction: row; }

• The row-reverse value stacks the flex items horizontally (but from right to left):

.flex-container { 
display: flex; 
flex-direction: row-reverse; }