Flexbox Basics

The idea

display: flex turns a plain shelf into a smart shelf that automatically lines its boxes up in a row. justify-content is the instruction for how to spread those boxes out along the shelf - bunched in the middle, spread evenly, and so on.

What it actually is

Flexbox lines things up in a row (or a column) and lets you control the spacing between them. Add display: flex; to a container, and its children line up automatically. Then justify-content controls how spread out they are.

How you write it

selector {
  display: flex;
  justify-content: value;
}

A worked example

.row {
  display: flex;
  justify-content: center;
}

display: flex; turns .row into a flex container - its direct children line up in a row automatically instead of stacking on separate lines. justify-content: center; then bunches all of them together in the middle.

.row {
  display: flex;
  justify-content: space-between;
}

space-between pushes the first child all the way to the left, the last child all the way to the right, and spreads any others evenly in between - a very common pattern for navigation bars.

Mistakes children actually make

Mistake 1: setting justify-content without display: flex first - justify-content does nothing at all unless its container is already a flex container. Mistake 2: expecting justify-content to control VERTICAL spacing - by default it controls horizontal alignment; vertical alignment uses a different property (align-items). Mistake 3: assuming display: flex automatically stacks children in a column - the default direction is actually a row (horizontal); stacking them vertically needs an extra property, flex-direction: column, set explicitly.

Then they try it

In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Turn .row into a flex container and center its children horizontally with justify-content. The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.