CSS Flexbox-Ausrichtung

Die Ausrichtungsoptionen von Flexbox machen dieses Modell besonders leistungsfähig. Damit lässt sich steuern, wie die Elemente horizontal und vertikal im Container angeordnet werden.

Grundlagen der Ausrichtung

Flexbox bietet mehrere Einstellungen für die Ausrichtung: justify-content, align-items, align-self und align-content. Zusammen ermöglichen sie die vollständige Kontrolle über die Anordnung der Elemente.

Eigenschaft	Beschreibung
justify-content	Horizontale Verteilung der Elemente entlang der Hauptachse.
align-items	Vertikale Ausrichtung der Elemente entlang der Querachse.
align-self	Ermöglicht einem bestimmten Element eine individuelle Ausrichtung.
align-content	Vertikale Ausrichtung bei mehrzeiligen Layouts.

Praktisches Beispiel

Im folgenden Beispiel werden die Elemente horizontal zentriert und vertikal am unteren Rand ausgerichtet.

Mit justify-content: center und align-items: flex-end werden die Elemente horizontal zentriert und vertikal unten ausgerichtet.

Tipps zur Flexbox-Ausrichtung

Die Ausrichtungseigenschaften helfen, Elemente präzise zu platzieren und so responsive und flexible Layouts zu erstellen.

justify-content und align-items werden oft zusammen verwendet, um ein harmonisches Layout zu erreichen.
align-self erlaubt es, ein einzelnes Element anders auszurichten als die anderen.
align-content wirkt nur, wenn der Flex-Container mehrere Zeilen enthält.