LESSON 17

Flexbox Basics

Learning objective: Lay out items in a row or column with flexbox.

Understand

Flexbox is a modern one-dimensional layout system.

Set display: flex on a container and its children become flex items laid out in a row by default. flex-direction switches between row and column. Flexbox makes spacing and alignment far easier than older techniques.

Analogy: A flex container is like a shelf that arranges its items neatly in a line.

See It in Action

A basic flex row:

.row {
  display: flex;
  gap: 16px;
}
How it works: display: flex lines up the children in a row, and gap puts even space between them without extra margins.

Try It Yourself

  1. Make a container display: flex.
  2. Add gap between items.
  3. Switch to flex-direction: column.

Quick Quiz

What does display: flex do to child elements?

Challenge

Arrange three cards in a row with even spacing using flexbox.

Success condition: Your three cards sit in a row with consistent gaps.