Exemple d'utilisation de FLEX row + justify-content

On place des boîtes de 200 pixel de large avec une marge de 0 dans un container section de type flex-direction: row. Les éléments dans un container sont affichés sur une même ligne.

On remarque que les boîtes sont collées car il n'y a pas de marge et pour la section, on n'a pas défini de gap.

La hauteur de la section est celle de la boîte la plus grande.

Justify flex-start

Justify flex-end

Justify center

Justify space-around

Justify space-between

Justify space-evenly

Justify flex start avec plusieurs éléments

Même si la boîte fait 200px de large, les éléments sont redimensionnés.

Justify flex start avec plusieurs éléments et min-width

Si on fixe une min-width à 200px de large, les éléments ne sont plus redimensionnés.

Justify flex start avec plusieurs éléments et min-width + wrap

Si on fixe une min-width à 200px de large et un flex-wrap à wrap, les éléments ne sont plus redimensionnés mais sont affichés sur plusieurs lignes.

Justify flex-start avec gap

On utilise un gap de 30px.