CSS Flexbox Layout Cheat Sheet

Das Flexbox-Layoutmodell (Flexible Box) bietet eine effizientere Methode zum Ausrichten und Verteilen von Elementen innerhalb eines Containers, auch wenn deren Größe unbekannt oder dynamisch ist.

Flex-Container

Set on parent: display: flex; or display: inline-flex;

Eigenschaft	Beschreibung	Gängige Werte
`flex-direction`	Hauptachsenrichtung	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Umbruchverhalten	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Kurzform für Richtung und Umbruch	`row wrap`
`justify-content`	Ausrichtung auf der Hauptachse	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Ausrichtung auf der Querachse	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Ausrichtung mehrerer Zeilen auf der Querachse	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Flex-Elemente

Set on children:

Eigenschaft	Beschreibung	Standard
`order`	Anordnungsreihenfolge (kleinere Werte zuerst)	`0`
`flex-grow`	Vergrößerungsfaktor (wenn Platz vorhanden)	`0`
`flex-shrink`	Verkleinerungsfaktor (wenn Platz knapp)	`1`
`flex-basis`	Basisgröße vor der Platzverteilung	`auto`
`flex`	Kurzform für grow, shrink und basis	`0 1 auto`
`align-self`	Individuelle Ausrichtung für ein einzelnes Element	`auto`

Kernkonzepte

Hauptachse (Main Axis): Standardmäßig horizontal, definiert durch flex-direction.
Querachse (Cross Axis): Die zur Hauptachse senkrechte Richtung.

Szenario-Beispiele

Horizontal und vertikal zentrieren

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Gleichmäßige Breitenverteilung

.item {
  flex: 1; /* Freien Platz gleichmäßig belegen */
}

Beidseitige Ausrichtung (Space Between)

.navbar {
  display: flex;
  justify-content: space-between;
}