CSS-Flexbox-Spickzettel: Eigenschaften und Werte

Flexbox ordnet Elemente in einer Dimension an — einer Zeile oder Spalte — und verteilt den Platz dazwischen. Die Eigenschaften teilen sich in zwei Gruppen: die, die du am Container (dem Flex-Elternteil) setzt, und die, die du an den Items (seinen Kindern) setzt.

Das mentale Modell: flex-direction setzt die Hauptachse; justify-content richtet entlang ihr aus und align-items entlang der senkrechten Querachse.

Aktualisiert 2026-07-06

Container-Eigenschaften (das Flex-Elternteil)

Eigenschaft	Werte	Was sie tut
display	flex \| inline-flex	Ein Element zu einem Flex-Container machen
flex-direction	row \| row-reverse \| column \| column-reverse	Richtung der Hauptachse
flex-wrap	nowrap \| wrap \| wrap-reverse	Ob Items in neue Zeilen umbrechen
justify-content	flex-start \| center \| flex-end \| space-between \| space-around \| space-evenly	Ausrichtung entlang der Hauptachse
align-items	stretch \| flex-start \| center \| flex-end \| baseline	Ausrichtung entlang der Querachse
align-content	flex-start \| center \| space-between \| stretch	Richtet umgebrochene Zeilen aus (mehrzeilig)
gap	<length> (e.g. 16px)	Abstand zwischen Items

Item-Eigenschaften (die Kinder)

Eigenschaft	Werte	Was sie tut
flex-grow	0 \| <number>	Wie stark ein Item wächst, um Platz zu füllen
flex-shrink	1 \| <number>	Wie stark ein Item schrumpft, wenn der Platz knapp ist
flex-basis	auto \| <length>	Die Startgröße des Items vor Grow/Shrink
flex	e.g. 1 1 0 \| 1 \| auto	Kurzform für Grow, Shrink und Basis
align-self	auto \| center \| flex-start \| flex-end \| stretch	align-items für ein Item überschreiben
order	0 \| <integer>	Ein Item visuell umordnen (kleiner kommt zuerst)

Der häufigste Zentriertrick: Setze am Container display: flex; justify-content: center; align-items: center;, um ein Kind horizontal und vertikal zu zentrieren. Zu den in diesen Werten genutzten Größeneinheiten siehe die CSS-Einheiten-Referenz.