Flexbox: Align rows or columns

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

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: Create a layout using Flexbox
8: How to have a flex child not fill entire height