Sommaire

L’empilement des blocs

1. Empiler les blocs sur petits écrans

Si vous n’utilisez que la classe .columns, les blocs ne vont pas "s’empiler" sur les petits écrans. Ils resteront les uns à côtés des autres, horizontalement dans la ligne. Pour que les blocs s’affichent les uns sous les autres, toujours dans la même ligne, il faut utiliser les classes .large-expand et .small-12.

Voici le code HTML utilisé :

<div class="row"> 
  <div class="small-12 large-expand columns"> 
     <p>Fringilla Fusce Fermentum</p> 
  </div> 
  <div class="small-12 large-expand columns"> 
     <p>Egestas Dapibus Sit</p> 
  </div> 
  <div class="small-12 large-expand columns"> 
     <p>Purus Parturient Porta</p> 
  </div> 
  <div class="small-12 large-expand columns"> 
     <p>Sit Sollicitudin Nibh</p> 
  </div> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 04 / 04-grille-e1.html.

Voici l’affichage obtenu sur un écran large :

images/C04-008.png

Voici l’affichage obtenu sur un petit écran :

images/C04-009.png

Voici les propriétés Flexbox utilisées par la classe .large-expand sur un écran large :

.large-expand { 
  -webkit-flex: 1 1 0px; 
  -ms-flex: 1 1 0px;  ...