La propriété justify-content est une sous-propriété du module Flexible Box Layout.

Elle définit l'alignement le long de l'axe principal. Elle permet de répartir l'espace libre restant lorsque tous les éléments flexibles d'une ligne sont inflexibles, ou sont flexibles mais ont atteint leur taille maximale. Elle exerce également un certain contrôle sur l'alignement des éléments lorsqu'ils débordent de la ligne.

La propriété justify-content accepte six valeurs différentes :

• flex-start (valeur par défaut) : les éléments sont alignés sur la ligne de départ.
• flex-end : les éléments sont regroupés vers la ligne de fin
• center : les éléments sont centrés le long de la ligne
• space-between : les éléments sont répartis uniformément sur la ligne ; le premier élément est sur la ligne de début, le dernier élément sur la ligne de fin.
• space-around : les articles sont répartis uniformément sur la ligne avec un espace égal autour d'eux.
• space-evenly : les éléments sont répartis de manière à ce que l'espacement entre deux sujets d'alignement adjacents, avant le premier sujet d'alignement et après le dernier sujet d'alignement soit le même.

Syntaxe

justify-content: flex-start | flex-end | center | space-between |
  space-around | space-evenly .flex-item {
  justify-content: center;
}

Démo

La démo suivante montre comment les éléments flex se comportent en fonction de la valeur justify-content :

• La liste rouge est définie sur flex-start
• La liste jaune est réglée sur flex-end
• La liste bleue est réglée sur center
• La liste verte est réglée sur space-between
• La liste rose est réglée sur space-around
• Le vert clair est réglé sur space-evenly

voir Flexbox & justify-content de team/css-tricks dans CodePen