Flexbox: Align rows or columns

The first property we see, flex-direction, determines if the container should align its items as rows, or as columns:

  • flex-direction: row places items as a row, in the text direction (left-to-right for western countries)
  • flex-direction: row-reverse places items just like row but in the opposite direction
  • flex-direction: column places items in a column, ordering top to bottom
  • flex-direction: column-reverse places items in a column, just like column but in the opposite direction

Rows or columns

Lessons in this unit:

0: Introduction
1: ▶︎ Align rows or columns
2: Vertical and horizontal alignment
3: Wrap
4: Moving items before / after another one using order
5: Vertical alignment using align-self
6: Grow or shrink an item if necessary
7: DEMO Create a layout using Flexbox
Want to learn more? Check out our courses