Skip to Content
BootstrapPartie 2 — Mise en page : grille & layout2.5 — Les utilitaires Flex

2.5 — Les utilitaires Flex

⏱️ TL;DR — Au-delà de la grille, Bootstrap expose toute la Flexbox en classes : d-flex active le mode flex, puis flex-row/column, justify-content-*, align-items-*, flex-wrap, flex-grow-*, gap-*… De quoi construire des barres d’outils, des cartes et des alignements sans écrire une ligne de CSS.

🎯 Objectifs

  • Activer un conteneur flex et régler sa direction.
  • Aligner et distribuer les éléments.
  • Utiliser gap, flex-grow, flex-fill.

Activer flex

<div class="d-flex">…</div>          <!-- flex -->
<div class="d-inline-flex">…</div>   <!-- inline-flex -->

Direction

<div class="d-flex flex-row">…</div>          <!-- défaut : en ligne -->
<div class="d-flex flex-column">…</div>       <!-- en colonne -->
<div class="d-flex flex-md-row flex-column">  <!-- colonne sur mobile, ligne dès md -->

Justifier et aligner

<!-- axe principal (horizontal si row) -->
<div class="d-flex justify-content-between">…</div>
<!-- axe secondaire -->
<div class="d-flex align-items-center">…</div>
  • justify-content- : start | end | center | between | around | evenly.
  • align-items- : start | end | center | baseline | stretch.

Exemple d’une barre : titre à gauche, actions à droite.

<div class="d-flex justify-content-between align-items-center">
  <h5 class="m-0">Titre</h5>
  <div>
    <button class="btn btn-sm btn-outline-secondary">Annuler</button>
    <button class="btn btn-sm btn-primary">Valider</button>
  </div>
</div>

Espacer : gap

<div class="d-flex gap-3">
  <div>1</div><div>2</div><div>3</div>
</div>

gap-0 à gap-5, plus column-gap-* et row-gap-*. Bien plus simple que des marges sur chaque enfant.

Grandir / remplir

<div class="d-flex">
  <div class="flex-grow-1">Prend tout l'espace libre</div>
  <div>Fixe</div>
</div>
 
<div class="d-flex">
  <div class="flex-fill">Égalisent…</div>
  <div class="flex-fill">…leur largeur</div>
</div>

Wrap & align-content

<div class="d-flex flex-wrap">…</div>       <!-- passe à la ligne -->
<div class="d-flex flex-nowrap">…</div>

Pousser avec les marges auto

Le classique « pousse à droite » :

<div class="d-flex">
  <span>Gauche</span>
  <span class="ms-auto">Collé à droite</span>
</div>

💡 Pour un dev React — Ces classes couvrent ~95 % des besoins de layout d’un composant. Dans un projet React sans Tailwind, d-flex justify-content-between align-items-center gap-2 remplace avantageusement un style inline ou une classe CSS dédiée pour chaque petit conteneur.

✏️ Exercices

  1. Centrez parfaitement (horizontal + vertical) un bloc dans un conteneur de 200 px de haut.

✅ Solution

<div class="d-flex justify-content-center align-items-center" style="height:200px">
  <div>Centré</div>
</div>
  1. Une navbar maison : logo à gauche, menu à droite, sans offset ni grille.

✅ Solution

<div class="d-flex align-items-center">
  <span class="fw-bold">Logo</span>
  <nav class="ms-auto d-flex gap-3">…</nav>
</div>

🧠 Quiz de révision

1. Quelle classe active un conteneur flex ?

d-flex.

2. Quelle classe met de l’espace entre les enfants flex sans marges individuelles ?

gap-* (ex. gap-3).

3. Comment répartir les éléments avec un espace maximal entre eux ?

justify-content-between.

4. Quelle classe fait grandir un enfant pour occuper l’espace libre ?

flex-grow-1.

5. Comment « pousser » un élément flex tout à droite ?

ms-auto (marge gauche auto).

Chapitre suivant : 2.6 — Columns CSS, z-index & position

2.4 — Les gouttières (gutters)2.6 — Columns CSS, z-index & position