1. Flexbox permet que les champs se redisposent exactement comme voulu quand la taille du navigateur change.

Cette page contient 5 cellules avec des images et du texte. Ces 5 cellules sont disposées dans un champ Flexbox  (dans un but didactique, le champ Flexbox possède un cadre rouge).

Grâce au champ Flexbox, quand la largeur du navigateur change, les 5 cellules se placent automatiquement en suivant les 3 règles :

- les cellules doivent se placer sur une ou plusieurs lignes selon la largeur disponible,

- l'ensemble des cellules doit rester justifié dans la page,

- les cellules ne doivent pas changer de taille.

Ces 3 règles sont définies dans la description du champ Flexbox, onglet Détail : 

- quand la largeur du navigateur se réduit, les cellules passent à la ligne : c'est la propriété "Retour à la ligne" (flex-wrap),

- l'ensemble des cellules doit occuper toute la largeur possible avec un espacement uniforme entre les cellules, c'est la propriété "Alignement horizontal" (justify-content), fixée ici à "justifier avec blanc tournant",

- et pour ne pas que les cellules changent de hauteur, l'alignement vertical dans chaque ligne (align-items) est fixé en haut (au début).

Pour aérer, un espace entre les lignes et les colonnes est fixé à 20 pixels.

L'ancrage du champ Flexbox a, par ailleurs, été défini pour qu'il occupe toute la place en largeur et qu'il s'adapte à son contenu en hauteur.