The flex-direction property describes the direction of the flexible items.


selector {

      flex-direction: row | row-reverse | column | column-reverse | initial | inherit;



  • row - Default value. Displays flexible items horizontally
  • row-reverse - Displays flexible items horizontally (equal to row) but in reversed order
  • column - Displays flexible items vertically
  • column-reverse - Displays flexible items vertically (equal to column) but in reversed order
  • initial or inherit


Example of flex-direction property with row and column values:


›› go to examples ››