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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!