CSS Flex : Maîtriser Flexbox pour vos Mises en Page

Besoin de créer des mises en page modernes sans vous arracher les cheveux ? Flexbox est l’outil qu’il vous faut.

Ce guide complet vous montre comment maîtriser chaque propriété, avec des exemples clairs et du code à copier-coller.

Les propriétés du conteneur flex (parent)

Pour commencer à utiliser Flexbox, vous devez d’abord définir un conteneur. C’est l’élément parent qui va contrôler la disposition de ses enfants directs. Toutes les propriétés suivantes s’appliquent à ce conteneur.

La structure HTML de base pour tous nos exemples sera simple : un parent (.container) et des enfants (.item).

display

La propriété `display` est la première chose à déclarer. C’est elle qui active le contexte Flexbox sur un élément, le transformant en conteneur flexible.

• flex : Le conteneur se comporte comme un élément de type block. Il prend toute la largeur disponible.
• inline-flex : Le conteneur se comporte comme un élément de type inline. Sa largeur s’adapte à son contenu.

.container {
  display: flex; /* Active Flexbox pour ce conteneur */
}

flex-direction

Cette propriété définit l’axe principal du conteneur. En gros, elle décide si les éléments vont s’aligner horizontalement ou verticalement.

Les valeurs possibles sont :

• row : (valeur par défaut) Les éléments s’alignent de gauche à droite. C’est la direction row.
• row-reverse : Les éléments s’alignent de droite à gauche.
• column : Les éléments s’empilent de haut en bas. C’est la direction column.
• column-reverse : Les éléments s’empilent de bas en haut.

.container {
  display: flex;
  flex-direction: column; /* Les éléments seront empilés verticalement */
}

flex-wrap

Par défaut, tous les éléments flexibles tentent de tenir sur une seule ligne. La propriété flex-wrap contrôle ce comportement et autorise le passage à la ligne si nécessaire.

• nowrap : (valeur par défaut) Tous les éléments restent sur une seule ligne. Ils peuvent déborder du conteneur.
• wrap : Les éléments passent à la ligne suivante s’il n’y a plus de place.
• wrap-reverse : Les éléments passent à la ligne précédente. L’ordre des lignes est inversé.

.container {
  display: flex;
  flex-wrap: wrap; /* Permet aux items de passer à la ligne */
}

flex-flow

flex-flow est une propriété raccourcie qui combine flex-direction et flex-wrap en une seule déclaration. C’est plus rapide à écrire.

L’ordre est `flex-direction` puis `flex-wrap`. La valeur par défaut est row nowrap.

.container {
  display: flex;
  flex-flow: column wrap; /* Équivaut à flex-direction: column; et flex-wrap: wrap; */
}

justify-content

La propriété justify-content sert à aligner les éléments sur l’axe principal. Elle gère la distribution de l’espace disponible restant une fois que tous les éléments ont été placés.

Voici les valeurs les plus courantes :

• flex-start : (défaut) Les éléments sont collés au début de l’axe principal.
• flex-end : Les éléments sont collés à la fin de l’axe principal.
• center : Les éléments sont groupés au centre de l’axe principal.
• space-between : L’espace est réparti uniquement entre les éléments. Le premier est au début, le dernier à la fin.
• space-around : L’espace est réparti autour de chaque élément. L’espace sur les bords est moitié moins grand que l’espace entre les éléments.
• space-evenly : L’espace est réparti également entre chaque élément, y compris sur les bords.

.container {
  display: flex;
  justify-content: center; /* Aligne les items au centre de l'axe principal */
}

align-items

Tandis que justify-content gère l’axe principal, align-items aligne les éléments sur l’axe transversal (l’axe perpendiculaire).

Les valeurs sont :

• stretch : (défaut) Les éléments s’étirent pour remplir toute la hauteur (ou largeur) du conteneur.
• flex-start : Les éléments sont alignés au début de l’axe transversal.
• flex-end : Les éléments sont alignés à la fin de l’axe transversal.
• center : Les éléments sont centrés sur l’axe transversal.
• baseline : Les éléments sont alignés sur leur ligne de base (la ligne sur laquelle le texte repose).

.container {
  display: flex;
  height: 200px; /* Il faut une hauteur pour voir l'effet */
  align-items: center; /* Aligne les items au centre de l'axe transversal */
}

align-content

Cette propriété est souvent confondue avec align-items. La différence est simple : align-content aligne les lignes d’éléments entre elles. Elle n’a d’effet que si votre conteneur est multi-lignes, c’est-à-dire avec flex-wrap: wrap.

Elle gère l’espace disponible sur l’axe transversal, un peu comme justify-content le fait pour l’axe principal.

• flex-start : Toutes les lignes sont groupées au début de l’axe transversal.
• flex-end : Toutes les lignes sont groupées à la fin.
• center : Toutes les lignes sont groupées au centre.
• space-between : L’espace est réparti entre les lignes.
• space-around : L’espace est réparti autour des lignes.
• stretch : (défaut) Les lignes s’étirent pour occuper tout l’espace disponible.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px; /* Hauteur nécessaire pour voir l'espace à distribuer */
  align-content: space-between; /* Les lignes seront espacées verticalement */
}

gap, row-gap, column-gap

La propriété gap est un moyen simple et moderne de créer des espaces (gouttières) entre les éléments, sans affecter l’espace sur les bords du conteneur.

• gap : Définit l’espace pour les lignes et les colonnes. Si vous donnez deux valeurs (ex: `10px 20px`), la première est pour `row-gap` et la seconde pour `column-gap`.
• row-gap : Définit l’espace entre les lignes.
• column-gap : Définit l’espace entre les colonnes.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Applique un espace de 15px entre chaque item, horizontalement et verticalement */
}

Les propriétés des éléments flex (enfants)

Maintenant que le conteneur est configuré, on peut contrôler le comportement de chaque élément flexible individuellement. Ces propriétés s’appliquent directement aux enfants.

order

Par défaut, les éléments s’affichent dans l’ordre du code HTML. La propriété order permet de changer cet ordre visuel sans toucher au HTML.

La valeur par défaut est 0. Les éléments sont triés par ordre croissant de leur valeur `order`. Vous pouvez utiliser des nombres négatifs.

.item:nth-child(3) {
  order: -1; /* Cet élément apparaîtra avant les autres (qui ont un order de 0) */
}

flex-grow

Cette propriété définit la capacité d’un élément flexible à grandir. Elle accepte un nombre sans unité qui agit comme un facteur de proportion. La valeur par défaut est 0, ce qui signifie que l’élément ne grandit pas pour occuper l’espace disponible.

Si tous les éléments ont flex-grow: 1, l’espace restant sera réparti également entre eux. Si un élément a flex-grow: 2 et les autres 1, il prendra deux fois plus de place que les autres.

.item {
  flex-grow: 1; /* Tous les items grandissent de manière égale */
}
.item:nth-child(2) {
  flex-grow: 2; /* Le deuxième item prend deux fois plus de place que les autres */
}

flex-shrink

C’est l’inverse de flex-grow. flex-shrink définit la capacité d’un élément à rétrécir si l’espace vient à manquer. La valeur par défaut est 1, ce qui veut dire que les éléments peuvent rétrécir.

Pour empêcher un élément de rétrécir, il faut utiliser la valeur 0. C’est utile pour des logos ou des icônes qui ne doivent pas être déformés.

.item-logo {
  flex-shrink: 0; /* Ce logo ne réduira jamais sa taille */
}

flex-basis

La propriété flex-basis définit la taille par défaut d’un élément avant que l’espace restant ne soit distribué. On peut la voir comme une sorte de `width` ou `height` « idéale » dans un contexte Flexbox.

La valeur par défaut est auto. L’élément prend la taille de son contenu. On peut aussi utiliser des unités fixes (px, rem) ou des pourcentages (%).

.item {
  flex-basis: 150px; /* Chaque item essaiera d'avoir une largeur de base de 150px */
}

flex (la propriété raccourcie)

Il est rare d’utiliser `flex-grow`, `flex-shrink` et `flex-basis` séparément. La plupart du temps, on utilise le raccourci `flex`. C’est la méthode recommandée.

L’ordre des valeurs est : flex-grow flex-shrink flex-basis.

• flex: 0 1 auto; : (valeur par défaut) L’élément ne grandit pas, peut rétrécir, et sa taille de base est automatique. C’est équivalent au mot-clé initial.
• flex: 1 1 auto; : L’élément peut grandir et rétrécir, sa taille de base est auto. C’est équivalent à auto.
• flex: 0 0 auto; : L’élément est rigide. Il ne peut ni grandir ni rétrécir. C’est équivalent à none.
• flex: 1; : C’est un raccourci commun qui est interprété comme flex: 1 1 0%. L’élément prend une part proportionnelle de l’espace disponible.

.item {
  flex: 1; /* Raccourci pour flex: 1 1 0%; les items se partagent l'espace également */
}

align-self

Cette propriété permet de surcharger l’alignement défini par `align-items` sur le conteneur, mais pour un seul élément. C’est utile pour créer une exception dans un groupe.

Elle accepte les mêmes valeurs que `align-items`, plus la valeur `auto` (qui hérite de la valeur du parent).

• auto : (défaut)
• flex-start
• flex-end
• center
• baseline
• stretch

.container {
  display: flex;
  align-items: center; /* Tous les items sont centrés par défaut */
}
.item-special {
  align-self: flex-start; /* Sauf celui-ci, qui est aligné en haut */
}

Exemples pratiques et cas d’usage courants

La théorie, c’est bien. La pratique, c’est mieux. Voyons comment utiliser ces propriétés pour résoudre des problèmes de mise en page courants.

Centrer parfaitement un élément (horizontalement et verticalement)

Le centrage vertical a longtemps été un casse-tête en CSS. Avec Flexbox, c’est un jeu d’enfant. L’astuce la plus simple est d’utiliser margin: auto sur l’élément enfant dans un conteneur flex.

<div class="parent">
  <div class="enfant">Centré !</div>
</div>

.parent {
  display: flex;
  height: 300px; /* Obligatoire pour le centrage vertical */
  border: 1px solid black;
}
.enfant {
  width: 100px;
  height: 100px;
  margin: auto; /* La magie opère ici */
  background-color: lightblue;
}

Créer une barre de navigation responsive

Flexbox est parfait pour les barres de navigation. On peut facilement aligner le logo à gauche, les liens au milieu ou à droite, et faire en sorte que tout s’empile proprement sur mobile.

On utilise justify-content: space-between pour pousser le logo et les liens aux extrémités, et align-items: center pour les centrer verticalement.

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #333;
  color: white;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

/* Pour les petits écrans */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column; /* On empile les éléments */
    gap: 15px;
  }
}

Créer une galerie d’images ou une grille de cartes flexible

Pour une grille d’éléments qui s’adapte à la taille de l’écran, la combinaison flex-wrap: wrap et flex: 1 1 200px est très efficace. Chaque élément essaie d’avoir une taille de base de 200px, mais peut grandir ou rétrécir pour remplir l’espace disponible.

<div class="gallery">
  <div class="card">Carte 1</div>
  <div class="card">Carte 2</div>
  <div class="card">Carte 3</div>
  <div class="card">Carte 4</div>
</div>

.gallery {
  display: flex;
  flex-wrap: wrap; /* Indispensable pour la grille */
  gap: 10px;
}
.card {
  flex: 1 1 200px; /* Base de 200px, mais peut grandir et rétrécir */
  height: 150px;
  background-color: #eee;
}

Concepts clés et terminologie

Comprendre le vocabulaire de Flexbox aide à mieux visualiser ce que font les propriétés.

Conteneur flex et éléments flex

C’est la base de tout. Le conteneur flex est l’élément parent sur lequel on applique `display: flex`. Les éléments flex (ou flex items) sont ses enfants directs. Les propriétés ne s’appliquent pas aux petits-enfants.

Axe principal et axe transversal

Flexbox fonctionne selon deux axes :

• L’axe principal (main axis) est défini par la propriété flex-direction. Si `flex-direction: row`, il est horizontal. Si c’est `column`, il est vertical.
• L’axe transversal (cross axis) est toujours perpendiculaire à l’axe principal.

Retenez bien que l’axe principal n’est pas toujours horizontal. C’est une erreur fréquente chez les débutants. Les termes `main-start`, `main-end`, `cross-start` et `cross-end` désignent les débuts et fins de ces axes.

Flexbox vs. grid : quand utiliser quoi ?

C’est une question qui revient souvent. La règle est simple :

• Flexbox est conçu pour la mise en page unidimensionnelle. Il est parfait pour aligner des éléments sur une seule ligne ou une seule colonne. Idéal pour les composants comme les barres de navigation, les formulaires, ou l’alignement de boutons.
• Grid est conçu pour la mise en page bidimensionnelle. Il gère à la fois les lignes et les colonnes. C’est l’outil à utiliser pour la structure globale d’une page (header, sidebar, main, footer).

Les deux ne sont pas en compétition. En fait, ils sont complémentaires. On utilise souvent Grid pour la structure principale et Flexbox à l’intérieur des zones de la grille pour aligner le contenu.

Flexbox est un outil puissant pour la mise en page web. Une fois que vous maîtrisez les propriétés du conteneur et des éléments, vous pouvez créer des designs complexes et responsives facilement. C’est un indispensable du CSS moderne.