Flexbox¶

Flexbox ist ein leistungsfähiges Layout-Modul, das Entwicklern ermöglicht, flexible und anpassungsfähige Layouts zu erstellen. Ein zentrales Konzept von Flexbox ist die Verwendung der Eigenschaft display: flex, die einen Container in einen flexiblen Container umwandelt und ermöglicht, dass seine direkten Kinder (Flex-Elemente) auf flexible Weise angeordnet werden.

Vorteile von Flexbox¶

Flexibles Layout: Flexbox ermöglicht es, Layouts zu erstellen, die sich dynamisch an verschiedene Bildschirmgrößen und -ausrichtungen anpassen.
Einfache Zentrierung: Elemente können sowohl vertikal als auch horizontal leicht zentriert werden.
Gleichmäßige Verteilung: Der verbleibende Platz kann gleichmäßig zwischen oder um die Flex-Elemente herum verteilt werden.
Ordnung und Reihenfolge: Die Reihenfolge der Flex-Elemente kann einfach geändert werden, ohne die HTML-Struktur zu verändern.

Dazu richtet Flexbox die Elemente auf einer Main-Achse und einer Kreuz-Achse aus.

Flexbox Aufbau

Die Haupt-Achse ist die primäre Achse, auf der alle Elemente horizontal ausgerichtet werden.
Die Kreuz-Achse ist die sekundäre Achse, auf der die Elemente vertikal ausgerichtet werden.

Bemerkung

Wie die Haupt-Achse verläuft hängt immer von der Eigenschaft flex-direction ab. Der Standard ist honrizontal.

Flexbox benötigt immer ein Element als Container – den sogenannten flex-container – für die Elemente flex-items innerhalb des Containers. Diese flex-items richten sich dann innerhalb des flex-containers aus.

Zuerst erzeugen wir ein div mit der Klasse container. Dies ist der flex-container. Darin befinden sich drei weitere divs mit der Klasse box. Zusätzlich erhält jedes div eine eigene Klasse box1, box2, box3.

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Die Boxen erhalten folgendes CSS:

.box1,
.box3 {
  width: 100px;
  height: 50px;
}

.box1 {
  background-color: aqua;
}

.box2 {
  background-color: crimson;
  width: 50px;
  height: 100px;
}

.box3 {
  background-color: gold;
}

Box 1

Box 2

Box 3

display¶

Die Eigenschaft display: flex wird auf einen Container angewendet, um ihn in einen Flex-Container zu verwandeln. Sobald ein Container als Flex-Container definiert ist, können die darin enthaltenen Elemente auf verschiedene Arten angeordnet werden.

.container {
  display: flex;
}

Box 1

Box 2

Box 3

justify-content¶

Die Eigenschaft justify-content verteilt den freien Platz entlang der Hauptachse.

Eigenschaftswert	Erklärung
flex-start	Standardwert. Alle Elemente werden am Anfang positioniert.
flex-end	Alle Elemente werden am Ende positioniert.
center	Alle Elemente werden zentriert positioniert.
space-between	Elemente werden mit Abstand dazwischen verteilt.
space-around	Elemente erhalten beidseitig etwas Abstand.
space-evenly	Elemente werden vollständig gleichmäßig verteilt.

.container {
  display: flex;
  justify-content: space-evenly;
}

Box 1

Box 2

Box 3Box 1

align-items¶

Mit der CSS-Eigenschaft align-items werden Elemente auf der Kreuz-Achse ausgerichtet.

Wert	Erklärung
stretch	Standardwert. Elemente werden in der Höhe gestreckt.
flex-start	Elemente werden oben positioniert.
flex-end	Elemente werden unten positioniert.
center	Elemente werden vertikal zentriert.

.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

Box 1

Box 2

Box 3

gap¶

Gap bestimmt den Abstand zwischen Elementen.

Wert	Erklärung
10px	10px Abstand in beide Richtungen
10px 20px	10px vertikal, 20px horizontal
10px 0	10px vertikal, 0px horizontal
0 10px	0px vertikal, 10px horizontal

Wichtig

gap kontrolliert nur den Abstand zwischen den Elementen.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

Box 1

Box 2

Box 3

flex-direction¶

Die Eigenschaft flex-direction legt die Ausrichtung der Elemente fest. Wennflex-direction: column verwendet wird, verläuft die Hauptachse vertikal statt horizontal. Um die Elemente dann horizontal auszurichten, wird align-items verwendet.

Wert	Erklärung
row	Standard. Elemente horizontal
row-reverse	Horizontal rückwärts
column	Vertikal
column-reverse	Vertikal rückwärts

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

Box 1

Box 2

Box 3

flex-wrap¶

Mit flex-wrap wird bestimmt, ob Elemente umbrechen.

Bemerkung

Elemente brechen um, wenn nicht genug Platz vorhanden ist.

Wert	Erklärung
nowrap	Standard. Kein Umbruch
wrap	Elemente brechen um
wrap-reverse	Rückwärts umbrechen

.container {
  display: flex;
  flex-wrap: wrap;
}

Box 1

Box 2

Box 3

Box 4

Box 5

Eigenschaften für flex-items¶

flex-basis¶

Die Eigenschaft flex-basis legt fest, wie groß ein Flex-Item bevor es wächst oder schrumpft sein soll. Sie definiert also die Ausgangsgröße eines Elements auf der Hauptachse. Je nachdem, welche Richtung der Flex-Container nutzt (row oder column), entspricht flex-basis entweder der Breite oder der Höhe des Elements.

flex-basis kann feste Werte wie 100px, 50% oder automatische Werte wie auto annehmen. Standardwert ist auto, wodurch die Größe aus width bzw. height übernommen wird.

Flex-Direction Row

Hier ist die Hauptachse horizontal, daher bestimmt flex-basis die Breite der Elemente.

.container {
  display: flex;
  flex-direction: row;
}
.box1 {
  flex-basis: 150px;
  background-color: aqua;
}

.box2 {
  flex-basis: 300px;
  background-color: crimson;
}

.box3 {
  flex-basis: 200px;
  background-color: gold;
}

Box 1

Box 2

Box 3

Die Boxen beginnen also mit 150px, 300px bzw. 200px Breite. Erst danach greifen Eigenschaften wie flex-grow.

Flex-Direction Column

Hier verläuft die Hauptachse vertikal, daher legt flex-basis die Höhe fest.

.container {
  display: flex;
  flex-direction: column;
}

.box1 {
  flex-basis: 80px;
  background-color: aqua;
}

.box2 {
  flex-basis: 120px;
  background-color: crimson;
}

.box3 {
  flex-basis: 60px;

Box 1

Box 2

Box 3

Die Boxen starten mit 80px, 120px bzw. 60px Höhe.

Unterschied zwischen width und flex-basis

Wenn beide Eigenschaften gesetzt sind, gewinnt flex-basis.

.box {
  width: 200px;
  flex-basis: 100px;
}

Box 1

Das Element ist auf der Hauptachse nicht 200px groß, sondern 100px.

Bemerkung

flex-basis bestimmt die Startgröße eines Flex-Items – die Größe, die es erhält, bevor Flexbox anfängt zu wachsen, zu schrumpfen oder Platz zu verteilen.

flex-grow¶

flex-grow bestimmt, wie stark Elemente wachsen dürfen. Eine Box mit flex-grow: 2 bekommt doppelt so viel Platz wie eine mit flex-grow: 1.

Wert	Erklärung
0	Standard, wächst nicht
1, 2, 3	Wachstumsfaktor

.container {
  display: flex;
}

.box1 {
  flex-grow: 1;
}
.box2 {
  flex-grow: 2;
}

Box 1

Box 2

flex-shrink¶

flex-shrink bestimmt, ob Elemente kleiner werden dürfen.

Wert	Erklärung
1	Standard, darf schrumpfen
0	Darf nicht schrumpfen

.container {
  display: flex;
}

.box1 {
  flex-shrink: 1;
}
.box2 {
  flex-shrink: 0;
}

Box 1

Box 2