#justify-content

Legt fest, wie Flexbox/Grid-Elemente innerhalb eines Flexbox/Grid-Containers an der Hauptachse ausgerichtet werden.

default justify-content: flex-start;

Die Flexbox/Grid-Elemente werden zum Start der Hauptachse des Containers geschoben.

justify-content: flex-end;

Die Flexbox/Grid-Elemente werden zum Ende der Hauptachse des Containers geschoben.

justify-content: center;

Die Flexbox/Grid-Elemente werden entlang der Hauptachse des Containers zentriert.

justify-content: space-between;

Der verbleibende Platz wird zwischen den Flexbox/Grid-Elementen verteilt.

justify-content: space-around;

Der verbleibende Platz wird um die Flexbox/Grid-Elemente herum verteilt: Dies fügt Platz vor dem ersten Element und nach dem letzten Element hinzu.