Skip to content
WANCODE
BM

Flexbox Made Simple

15 minBeginnerHTML · CSS · JS

In this lesson

  • Turn a container into a flex container with display: flex
  • Use justify-content, align-items and gap to place and space items
  • Know when to reach for flex-direction and flex-wrap
  • Centre an element horizontally and vertically

The big idea

Flexbox lays out a parent's children along one line. You style the parent, and its children fall into place.

Block elements stack on top of each other. That's fine for paragraphs, but a navigation bar, a row of buttons or a logo next to a menu needs things side by side. That's what flexbox is for.

CSS
.nav-links {
  display: flex;   /* children now sit in a row */
  gap: 20px;       /* space between them */
}

One line on the parent. The <li> children don't need any CSS at all.

Two axes

A flex container has a main axis (the direction items flow — a row, left to right, by default) and a cross axis (at right angles to it). Almost every flexbox property is about one of those two axes:

justify-content
Places items along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.
align-items
Places items along the cross axis: stretch (default), flex-start, center, flex-end.
gap
Space between items — no more margin hacks on every child.
flex-direction
row (default) or column. Switching to column swaps the axes: justify-content now works top-to-bottom.
flex-wrap
nowrap (default) squeezes everything onto one line. wrap lets items flow onto the next line when they run out of room.
Try each property and watch the items move. Notice how flex-direction: column changes what justify and align do.

The classic header

Logo on the left, links on the right, everything lined up in the middle. Three lines of flexbox:

CSS
.site-header {
  display: flex;
  justify-content: space-between; /* push logo and nav to opposite ends */
  align-items: center;            /* line them up vertically */
}

Centring anything

Centring something vertically used to be famously hard in CSS. With flexbox it's center on both axes. The parent needs some height for vertical centring to be visible.

CSS
.hero {
  display: flex;
  justify-content: center; /* horizontal (main axis) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 320px;
}

Most common mistake

display: flex goes on the parent (the container), not on the items you want to move. If nothing happens, check which element you styled.

Flexbox is for one direction at a time — a row or a column. For rows and columns together (like a card gallery), CSS Grid is usually easier. That's the next lesson.

The three navigation links are stacked on top of each other. Make .nav-links a flex container so they sit in a row, with at least 12px of gap between them.

Checks

  • .nav-links is a flex container
  • All three links sit on the same row
  • There's at least 12px between the links

Check understanding

Q1

You want three buttons inside <div class="actions"> to sit in a row. Where does display: flex go?

Q2

A container has display: flex; flex-direction: column;. Which property now spaces items from top to bottom?

Q3

Ten tags in a flex row are squashed and overflowing on a phone. What lets them flow onto a second line?

What you learned

  • display: flex on a parent lays its children out in a row.
  • justify-content = main axis, align-items = cross axis, gap = space between items.
  • flex-direction: column flips the axes; flex-wrap: wrap lets items use more than one line.
  • Centre anything: display: flex; justify-content: center; align-items: center;
Preview

Console output from your code appears here.

Step 1 of 3