Sommaire

L’alignement horizontal

Le modèle Flexbox nous permet de déterminer l’alignement horizontal des blocs dans les lignes de la grille.

Pour chaque ligne voulue, nous pouvons utiliser les classes suivantes :

  • .align-right : aligne les blocs sur la droite de la ligne,

  • .align-center : alignement centré des blocs dans la ligne,

  • .align-justify : justifie l’alignement des blocs dans la ligne,

  • .align-spaced : répartit les blocs dans la ligne.

Voici le code HTML utilisé :

<div class="row gris-clair"> 
  <div class="column small-4 gris-fonce"> 
     <p>Donec id elit non mi...</p> 
  </div> 
  <div class="column small-4 gris-fonce"> 
     <p>Nullam id dolor id nibh...</p> 
  </div> 
</div> 
<div class="row align-right gris-clair"> 
  <div class="column small-4 gris-fonce"> 
     <p>Aenean lacinia bibendum...</p> 
  </div> 
  <div class="column small-4 gris-fonce"> 
     <p>Aenean eu leo quam...</p> 
  </div> 
</div> 
<div class="row align-center gris-clair"> 
  <div class="column small-4 gris-fonce"> 
     <p>Morbi leo risus, porta ac...</p> 
  </div> 
  <div class="column small-4 gris-fonce"> 
     ...