Skip to main content
PProfileMatch
← Path

CSS Fundamentals · CSS Flexbox Tutorial: Lay Out Rows and Columns With Flex

0 XP
  1. 1 current stop: learning
  2. 2 upcoming
  3. 3 upcoming
  4. 4 upcoming
  5. 5 upcoming

Finish after stop 5

Stop 1 of 5 · Start of the Flex Road

Trick to keep in mind+3 XP

justify follows the flow, align crosses it; column turns the axes.

A flex container has a main axis, set by flex-direction, and a cross axis at right angles. justify-content always works along the main axis and align-items always works along the cross axis. Switching to column makes the main axis vertical, so justify then moves things up and down, as long as there is spare height to move in.

Read it once, then a question tests whether the trick stuck.