Ausrichtung von Flex-Elementen am übergeordneten Element mit Abständen

Der Wert space-around in der Eigenschaft justify-content weist dem ersten und letzten Flex-Element einen Abstand vom Rand des übergeordneten Elements zu.

Auf den ersten Blick mag es scheinen, dass der Abstand zwischen den Elementen und zwischen den äußeren Elementen und dem übergeordneten Element gleich sein werden, aber das ist nicht der Fall - der Abstand zwischen den Elementen wird 2 mal größer sein als zwischen dem übergeordneten Element und dem äußeren Element.

Betrachten wir ein Beispiel:

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

Ergebnis der Codeausführung: