Flexbox: Aligning Along an Axis

First lesson of the Responsive Layout (Flexbox, Grid) course, free to read: about 15 minutes, 3 exercises and 3 quiz questions. This is the catalogue's base lesson; in the student space, it is rewritten for your profile.

Objectives

Create a flex container and understand the main axis and cross axis
Align and distribute elements with justify-content and align-items
Space elements out with gap

Flexbox Box alignment

Aligning a logo on the left and a menu on the right, centering a block vertically, spacing buttons evenly: these tasks were painful before Flexbox. Today, a few lines are enough.

Flexbox is a one-dimensional layout model: it arranges items in a row or in a column.

Container and items

You enable Flexbox on the parent:

<nav class="barre">
  <a class="logo" href="/">Rando&amp;Co</a>
  <ul class="menu">...</ul>
</nav>

.barre {
  display: flex;   /* .barre becomes a flex container */
}

Its direct children (.logo and .menu) become flex items: they sit side by side on a single line and take the height of the line. Grandchildren are not affected: to align the links inside .menu, you also need to set .menu to display: flex.

The two axes

The main axis is defined by flex-direction: row (the default, horizontal, in reading direction) or column (vertical). The row-reverse and column-reverse variants reverse the direction.
The cross axis is perpendicular to it.

Remembering this principle avoids the classic confusion: justify-content always acts on the main axis, align-items on the cross axis. If you switch to column, their effects “rotate”.

Distributing: justify-content

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

Value	Effect on the main axis
`flex-start` (default)	grouped at the start
`center`	grouped at the center
`flex-end`	grouped at the end
`space-between`	first and last pushed to the edges, equal space between
`space-around` / `space-evenly`	space distributed around / equal everywhere

Aligning: align-items

.barre { display: flex; align-items: center; }

Value	Effect on the cross axis
`stretch` (default)	stretched to the full height
`center`	centered
`flex-start` / `flex-end`	at the top / at the bottom
`baseline`	aligned on the text baseline

An item can override this with align-self: .logo { align-self: flex-start; }.

Spacing: gap

.menu { display: flex; gap: 1.5rem; }

gap adds space between items, never at the edges. It is simpler and more reliable than margins on each item.

Recipes to know

/* Navigation bar: logo on the left, menu on the right, vertically centered */
.barre { display: flex; justify-content: space-between; align-items: center; }
.menu  { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }

/* Perfect centering of a block in an area */
.hero { display: flex; justify-content: center; align-items: center; min-height: 60vh; }

/* Push an item to the right: an auto margin absorbs the free space */
.panier { margin-left: auto; }

Browser inspectors offer a flex badge next to the container: click it to visualize the axes and the spaces. It is the best way to understand what is happening.

Exercises

Solutions and tests stay on the server. In the student space, your code is run and checked, and the tutor gives hints before the solution.

CodeDifficulty 1HTML page in the browser2 hints

Navigation bar

Make .barre flex so that the logo is on the left and the menu on the right (space-between), vertically centered. Also make .menu flex with a gap of 16px.

<style>
  .menu { list-style: none; margin: 0; padding: 0; }
  /* vos règles */
</style>
<nav class="barre">
  <a class="logo" href="/">Logo</a>
  <ul class="menu">
    <li><a href="/">Accueil</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

CodeDifficulty 2HTML page in the browser2 hints

Perfect centering

Center the .message horizontally and vertically inside .zone (height 300px) with Flexbox. Then switch .zone to flex-direction: column and add the button below the message, still centered, with a gap of 12px.

<style>
  .zone { height: 300px; border: 1px dashed #999; }
  /* vos règles */
</style>
<div class="zone">
  <p class="message">Votre panier est vide</p>
  <a class="bouton" href="/catalogue">Voir le catalogue</a>
</div>

Multiple choiceDifficulty 21 hint

The axes in a column

With flex-direction: column, which property centers the items horizontally?

justify-content: center
align-items: center
text-align: center

End-of-lesson quiz

On which element do you write display: flex?

On each child
On the parent container
On body only

Which justify-content value pushes the first and last items to the edges?

space-around
space-between
center

What is the advantage of gap over margins?

It also adds space at the edges
It spaces only between items, without any calculation
It only works in Grid

The rest of the course

Flexbox: Flexible Sizes and Wrapping15 min

CSS Grid: Columns and Rows20 min

CSS Grid: Named Areas and Placement15 min

Media Queries and the Mobile-First Approach20 min

Modern Responsive: clamp(), Container Queries, and Adaptive Images20 min

Responsive Layout (Flexbox, Grid) · Intermediate · 3 h 45 min