Flexbox : aligner et répartir les éléments

Pendant longtemps, placer deux blocs côte à côte ou centrer quelque chose au milieu d’une page relevait du bricolage. Flexbox a mis fin à cette époque : en quelques lignes, vous alignez, répartissez et centrez des éléments, y compris quand leur taille varie. Dans cette leçon, vous allez construire l’en-tête du portfolio de Camille, avec son nom à gauche et son menu à droite, puis disposer un bandeau de présentation.

Le principe : un conteneur et ses éléments

Flexbox repose sur une relation parent-enfant. On déclare display: flex sur le conteneur (le parent) ; ses enfants directs deviennent alors des éléments flex que le conteneur sait aligner et répartir. Les petits-enfants ne sont pas concernés.

<header class="entete">
  <p class="logo">Camille Morel</p>
  <nav>
    <ul class="menu">
      <li><a href="#projets">Projets</a></li>
      <li><a href="#a-propos">À propos</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

.entete {
  display: flex;
}

Dès cette règle, le logo et la navigation, au lieu de s’empiler, se placent côte à côte sur une même ligne. Pour transformer la liste du menu en rangée de liens, on fait de même :

.menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

La propriété gap crée un espace uniforme entre les éléments, sans avoir à gérer des marges individuelles ni à traiter à part le premier ou le dernier : c’est bien plus pratique.

Les deux axes

Toute la logique de Flexbox repose sur deux axes :

• l’axe principal, dans la direction où les éléments se suivent (par défaut, horizontal, de gauche à droite) ;
• l’axe secondaire, perpendiculaire (par défaut, vertical).

La propriété flex-direction choisit l’axe principal : row (par défaut), column (vertical), et les variantes inversées row-reverse et column-reverse. Quand vous passez en column, les axes s’échangent : l’axe principal devient vertical. Gardez cela en tête pour les propriétés suivantes.

Aligner et répartir

Deux propriétés du conteneur font l’essentiel du travail :

• justify-content répartit les éléments sur l’axe principal ;
• align-items les aligne sur l’axe secondaire.

Pour align-items, les valeurs usuelles sont stretch (étire, par défaut), flex-start, center, flex-end et baseline (alignement sur la ligne de base du texte). L’en-tête de Camille se complète ainsi :

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

Le logo se place à gauche, le menu à droite, et les deux sont centrés verticalement entre eux. Il suffisait de deux propriétés !

Le centrage parfait

La question qui a fait couler le plus d’encre sur le web : comment centrer quelque chose horizontalement et verticalement ?

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

Trois lignes suffisent. Ce motif est à retenir.

Passer à la ligne : flex-wrap

Par défaut, les éléments flex restent sur une seule ligne, quitte à se rétrécir. Avec flex-wrap: wrap, ils passent à la ligne suivante lorsque la place manque :

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

C’est idéal pour une série d’étiquettes ou de petits boutons, qui s’adaptent seuls à la largeur de l’écran.

Contrôler la taille des éléments : flex

Les éléments flex peuvent grandir pour occuper l’espace libre et rétrécir lorsque la place manque. Trois propriétés, résumées dans le raccourci flex, pilotent ce comportement :

• flex-grow : la part d’espace libre que l’élément absorbe (0 = ne grandit pas) ;
• flex-shrink : sa capacité à rétrécir (1 = peut rétrécir) ;
• flex-basis : sa taille de départ, avant répartition.

.contenu { flex: 1; }          /* prend tout l’espace restant */
.laterale { flex: 0 0 15rem; } /* largeur fixe de 15rem, ne grandit ni ne rétrécit */

Avec flex: 1 sur tous les enfants, l’espace se partage à parts égales : trois cartes de même largeur sans calcul de pourcentages. Les valeurs peuvent différer : un élément avec flex: 2 prendra deux fois plus de place qu’un frère à flex: 1.

Un élément isolé peut aussi se distinguer de ses voisins : align-self change son alignement sur l’axe secondaire, margin-left: auto le repousse à l’extrémité (très utile dans un menu pour isoler le bouton « Contact »), et order modifie son ordre d’affichage.

Flexbox pour les cartes : exemple complet

Voici trois cartes de projets réparties sur une ligne, qui passent à la ligne si la fenêtre se rétrécit :

.projets {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.carte {
  flex: 1 1 16rem; /* grandit, rétrécit, base de 16rem */
  background: white;
  border-radius: 12px;
  padding: 1rem;
}

Chaque carte vise 16 rem de large, mais peut grandir pour remplir la ligne. Quand l’espace ne permet plus d’en loger trois, la dernière passe à la ligne. Sans une seule règle de média, la mise en page s’adapte à l’écran : c’est la base du design réactif, que vous approfondirez dans les leçons suivantes.

Quand utiliser Flexbox ?

Flexbox excelle pour une mise en page à une seule dimension : une ligne ou une colonne d’éléments. Il est parfait pour :

• un menu de navigation ;
• une barre d’outils, une rangée de boutons ;
• un composant qui aligne une icône et un texte ;
• le centrage d’un contenu ;
• un pied de page qui reste en bas de la fenêtre (avec min-height: 100vh sur le body et flex: 1 sur main).

Pour disposer des éléments en lignes et en colonnes à la fois, une grille, que vous découvrirez dans la leçon suivante, est plus adaptée.

À vous de jouer

Dans le portfolio :

1. transformez l’en-tête en un conteneur flex : logo à gauche, menu à droite, alignés verticalement ;
2. faites du menu une rangée horizontale sans puces avec un espace entre les liens ;
3. disposez les cartes de projets avec flex-wrap et flex: 1 1 16rem ;
4. faites en sorte que le pied de page reste en bas de la fenêtre même sur une page courte.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main { flex: 1; }

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.projets {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.carte { flex: 1 1 16rem; }

Pour organiser des éléments en lignes et en colonnes, place à CSS Grid dans la leçon suivante.