Chapter 4 — Flexbox Layout

Arrange direct children along a main axis and compare different distribution strategies.

New concepts

Text alignment, display: flex, and justify-content values including start, end, centre, space-between, space-around, and space-evenly.

Read the Phase 3 gauge

What changed?

Phase 2 boxes can now form navigation bars, action groups, card rows, and split layouts. The cards page concentrates these patterns in one comparison.

Lessons

  1. 1. Flex login actions
  2. 2. Split profile
  3. 3. Product row
  4. 4. Survey actions
  5. 5. Gallery rows
  6. 6. Settings columns
  7. 7. Card pattern lab

Checkpoint

Build a three-item row and test at least three justify-content values. Describe how the main axis controls the result.