24 min read

Flexbox: a Row of Cards

Use display: flex to place cards side by side, space them with gap, let them wrap, and control alignment.

What Is Flexbox?

You apply display: flex to the container (the parent). Its direct children become flex items and line up in a row.

What the browser shows

Try it:

Drag the bottom edge of the preview box, or remove flex-wrap: wrap, and watch the cards behave. Change gap to 40px.

Practice

Cards overflow off the side of a phone screen. Which property lets them move onto new lines?

What Is Flexbox?

You apply display: flex to the container (the parent). Its direct children become flex items and line up in a row.

What the browser shows

Try it:

Drag the bottom edge of the preview box, or remove flex-wrap: wrap, and watch the cards behave. Change gap to 40px.

The Properties You Need

Practice

Cards overflow off the side of a phone screen. Which property lets them move onto new lines?