LESSON 19

Flexbox Layouts

Learning objective: Build flexible, wrapping layouts with flexbox.

Understand

Flexbox can build whole responsive layouts.

flex-wrap: wrap lets items flow onto new lines when space runs out. The flex shorthand on items controls how they grow and shrink. Combining wrap and flexible items creates layouts that adapt to any screen.

Analogy: Wrapping flex items are like text: when the line is full, they continue on the next.

See It in Action

A wrapping card grid:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid .card { flex: 1 1 200px; }
How it works: Cards each want to be about 200px but can grow to fill space and wrap to new rows as the screen narrows.

Try It Yourself

  1. Add flex-wrap: wrap to a card row.
  2. Give cards a flex: 1 1 200px basis.
  3. Resize the window to watch them wrap.

Quick Quiz

What does flex-wrap: wrap allow?

Challenge

Create a responsive card grid that wraps as the screen shrinks.

Success condition: Your cards rearrange onto multiple rows when the window narrows.