Chapter 7 — Advanced Flexbox

Wrap flex lines, distribute free space, align individual items or whole lines, and preserve logical source order.

New concepts

flex-wrap, flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, align-content, and order.

Read the Advanced Flexbox gauge

What changed after Phase 5?

Phase 5 gives boxes measurable, constrained sizes and safe overflow. Advanced Flexbox uses those sizes as inputs, then decides when items wrap and how positive or negative free space is shared.

Foundational prerequisites

  1. 1. Axes and container controls
  2. 2. Navigation alignment
  3. 3. Card layout
  4. 4. Split layout
  5. 5. Column layout

Advanced lessons

  1. 6. Wrapping and flex lines
  2. 7. Flexible sizing and shorthand
  3. 8. Item and line alignment
  4. 9. Visual order and source order

Checkpoint

Create a wrapping card row. Give each card an intentional grow factor, shrink factor, and basis, then explain how the row responds when its available width changes.