Flexbox, distribuer dans l'axe principal

La propriété justify-content gère l’alignement selon l’axe principal (main axis) choisi pour le conteneur flex.
On va appliquer justify-content au conteneur flex.

Les valeurs possibles sont :
> flex-start (éléments positionnés au début du sens de lecture, valeur par défaut)
> flex-end (éléments positionnés à la fin)
> center (position centrale)
> space-between (répartition “justifiée”, horizontale ou verticale, entre les boîtes placées aux extrémités)
> space-around (variante de répartition “justifiée”, horizontale ou verticale, elle permet un espace égal entre les boîtes)
> space-evenly (Répartition équitable. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.)

testez toutes les propriétés : https://developer.mozilla.org/fr/docs/Web/CSS/justify-content

Pour tester facilement et mieux comprendre :
CodePen - CSS Flexible Box Layout: justification du contenu

Vers Etape 06