Alignement des éléments flex par rapport au parent avec des marges

La valeur space-around dans la propriété justify-content définit une marge entre le premier et le dernier élément flex et le bord du parent.

À première vue, il peut sembler que la distance entre les éléments et entre les éléments extrêmes et le parent soient égales, cependant, ce n'est pas le cas - la distance entre les éléments sera 2 fois plus grande qu'entre le parent et l'élément extrême.

Regardons un exemple :

css.parent {
  display: flex;
  justify-content: space-around;
}

Résultat de l'exécution du code :