Sommaire

Les ajustements automatiques

1. Ne pas indiquer de largeur

La mise en page avec Flexbox nous permet d’avoir un ajustement automatique de la largeur des blocs. Il suffit d’indiquer seulement la première largeur pour que les autres blocs s’alignent sur les colonnes restantes.

Dans cet exemple, la première ligne comporte un premier bloc aligné sur six colonnes. Le deuxième bloc n’a pas d’indication d’alignement, il utilisera donc la place restante, soit six colonnes.

Pour la deuxième ligne, seul le premier bloc est aligné sur quatre colonnes. Les deux autres blocs sont sans indication, ils seront donc alignés sur quatre colonnes chacun.

Voici le code HTML utilisé :

<div class="row"> 
  <div class="small-6 columns"> 
     <p>Cum sociis natoque...</p> 
  </div> 
  <div class="columns"> 
     <p>Cras justo odio...</p> 
  </div> 
</div> 
<div class="row"> 
  <div class="small-4 columns"> 
     <p>Sed posuere consectetur...</p> 
  </div> 
  <div class="columns"> 
     <p>Vivamus sagittis lacus vel...</p> 
  </div> 
  <div class="columns"> 
     <p>VMaecenas sed diam eget...</p> 
  </div> 
</div>

Le fichier ...