Le système de flexbox

Bootstrap implémente le flexbox dans plusieurs éléments par défaut.

Par exemple, la classe navbar (barre de navigation) est naturellement un flex par défaut.

Appliquer le flex

Pour appliquer les capacités du flex sur des éléments dans notre HTML:

1. Rendre l'élément parent flexible

   <div class="d-flex">
       ...
   </div>
   

2. Ajouter la direction du flex au besoin

   <div class="d-flex flex-column">
       ...
   </div>
   

3. Utiliser justify-content et/ou align-items au besoin

   <div class="d-flex flex-column justify-content-center align-items-center">
       ...
   </div>
   

4. Au besoin sur les enfants, utiliser align-self et/ou les marges

   <div class="container d-flex flex-column justify-content-center align-items-center">
       <p>
           Un paragraphe centré en largeur et en hauteur grâce au parent.
       </p>
       <p class="align-self-start">
           Un paragraphe centré en hauteur grâce au parent, placé à gauche en largeur par son align-self.
       </p>
   </div>
   

Exemples de base

1️⃣ Alignement horizontal : espacement entre les éléments

<div class="d-flex justify-content-between">
  <div>Gauche</div>
  <div>Centre</div>
  <div>Droite</div>
</div>

2️⃣ Disposition en colonne avec centrage horizontal

<div class="d-flex flex-column align-items-center">
  <div>Élément 1</div>
  <div>Élément 2</div>
  <div>Élément 3</div>
</div>

3️⃣ Disposition réactive : colonne sur mobile, ligne sur écrans médium et plus

<div class="d-flex flex-column flex-md-row">
  <p class="p-2">Élément 1</p>
  <p class="p-2">Élément 2</p>
  <p class="p-2">Élément 3</p>
</div>

4️⃣ Espacement conditionnel : centré sur mobile, espacé sur grand écran

<div class="d-flex justify-content-center justify-content-lg-between">
  <div>Logo</div>
  <div>Menu</div>
</div>