↔️ CSS Intermediate

Flexbox

⏱ 2 hr3 topicsLive playground
🎯 By the end: You can turn an element into a flex container, control alignment with justify-content and align-items, change direction, and centre anything effortlessly.

For years, centering things and laying out rows in CSS was genuinely painful. Flexbox fixed that. It's the tool you'll reach for every single day — navigation bars, button rows, card layouts, and the age-old quest to centre a box both ways. Best of all, you can play with it below and watch it respond instantly.

1The flex container and its two axes

Flexbox works on a container and its direct children (the flex items). You opt in with one declaration:

.container {
  display: flex;
}

Instantly, the children line up in a row. The magic comes from two axes:

  • The main axis — the direction items flow. By default it's horizontal (a row).
  • The cross axis — perpendicular to it (vertical, for a row).

flex-direction sets the main axis: row (default), column, or the -reverse variants. Once you know which axis is which, the two alignment properties make perfect sense — which is exactly what the visualizer in the next section shows.

display: flex in action
HTML
CSS
Live preview
What's happening: Adding display:flex to .row lines its children up in a row — exactly how a nav bar is built. The gap property adds even spacing between them. Try changing display:flex to flex-direction:column by adding 'flex-direction: column;'.
Key points
  • display: flex on a container lays its direct children out as flex items.
  • The main axis is the flow direction; the cross axis is perpendicular.
  • flex-direction (row/column/-reverse) sets the main axis; gap spaces items evenly.

2Aligning items — play with it live

Two properties do most of the work, and this is where the visualizer earns its keep. Change the dropdowns below and watch the four boxes rearrange:

  • justify-content — aligns items along the main axis (spacing them left/right in a row). Values: flex-start, center, flex-end, space-between, space-around, space-evenly.
  • align-items — aligns items along the cross axis (top/middle/bottom in a row). Values: stretch, flex-start, center, flex-end.
Flexbox visualizer — change the dropdowns
1
2
3
4
Key points
  • justify-content aligns items along the main axis (e.g. spacing a row left/center/right).
  • align-items aligns items along the cross axis (e.g. top/middle/bottom of a row).
  • flex-wrap: wrap lets items flow onto multiple lines instead of squashing.

3The famous trick: centre anything

The single most-loved thing about flexbox: centering a box both horizontally and vertically, which used to be a nightmare, is now three lines.

.container {
  display: flex;
  justify-content: center;  /* centre on main axis */
  align-items: center;      /* centre on cross axis */
}
Commit those three lines to memory — display: flex plus both centers. You'll use it to centre content inside heroes, cards, buttons and modals for the rest of your career.

You can also make items grow to fill space with flex: 1 on the items (e.g. equal-width columns), but the container properties above cover the vast majority of layouts.

Perfect centering
HTML
CSS
Live preview
What's happening: display:flex + justify-content:center + align-items:center centres the badge both ways inside the hero. Delete align-items and it sticks to the top; delete justify-content and it sticks to the left.
Key points
  • To centre both ways: display: flex; justify-content: center; align-items: center;.
  • Memorise those three lines — it's the everyday centering solution.
  • flex: 1 on items makes them grow to share available space (e.g. equal columns).

★ Practical: build a nav bar and centre a box

In any playground:

  1. Make a display: flex row of three 'nav' items with a gap.
  2. Use justify-content: space-between to push them to the edges.
  3. In a separate box with a fixed height, perfectly centre some text using the three-line trick.
  4. Switch a container to flex-direction: column and notice the axes swap.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Position
Next →
CSS Grid