Eigenschaften des Flexbox Containers

Display Flex

Mit der CSS-Eigenschaft display legst du fest, wie ein Element dargestellt wird. Setzt du den Wert auf flex oder inline-flex, wird das Element zum Flex-Container – ab dann gelten alle Flexbox-Regeln für seine direkten Kindelemente.

1.container {
2    display: flex; /* or inline-flex */
3}

Der Unterschied zwischen flex und inline-flex: Mit display: flex verhält sich der Container wie ein Block-Element und nimmt die volle verfügbare Breite ein. Mit display: inline-flex verhält er sich wie ein Inline-Element – er ist nur so breit wie sein Inhalt und kann neben anderen Elementen stehen. In beiden Fällen funktionieren alle Flexbox-Eigenschaften gleich.

Container und Items

Jedes Flexbox-Layout besteht aus zwei Teilen: dem Flex-Container (dem Eltern-Element) und den Flex-Items (den direkten Kindelementen). Nur die direkten Kinder eines Flex-Containers werden zu Flex-Items – verschachtelte Enkel-Elemente nicht.

Der Flex-Container

Der Container ist das Eltern-Element, auf dem du display: flex setzt. An ihm stellst du ein, wie sich die Items anordnen, verteilen und ausrichten – zum Beispiel mit flex-direction, justify-content oder align-items.

Die Flex-Items

Flex-Items sind die direkten Kindelemente im Container. Sie werden automatisch in die Flex-Richtung gelegt und lassen sich über Item-Eigenschaften wie flex-grow, flex-shrink oder align-self einzeln steuern.

1<div class="container">
2    <div>Item 1</div>
3    <div>Item 2</div>
4    <div>Item 3</div>
5</div>

flex-direction

Mit flex-direction legst du fest, in welche Richtung die Flex-Items angeordnet werden. Standardmäßig stehen sie nebeneinander in einer Zeile (row). Die Pfeile in den Abbildungen zeigen die Hauptachse – also die Richtung, in der die Items nacheinander platziert werden.

Es gibt vier mögliche Werte:

• row – horizontal von links nach rechts (Standard)
• row-reverse – horizontal von rechts nach links
• column – vertikal von oben nach unten
• column-reverse – vertikal von unten nach oben

row (Standard)

Bei flex-direction: row liegen die Items in einer Zeile. Der Punkt markiert den Start, der Pfeil zeigt das Ende der Hauptachse – von links nach rechts.

1.container {
2    display: flex;
3    flex-direction: row;
4}

row-reverse

Mit row-reverse bleiben die Items in einer Zeile, aber die Reihenfolge wird umgekehrt: Der Start liegt rechts, die Items werden von rechts nach links angeordnet.

1.container {
2    display: flex;
3    flex-direction: row-reverse;
4}

column

Bei flex-direction: column stehen die Items untereinander in einer Spalte. Die Hauptachse verläuft von oben nach unten.

1.container {
2    display: flex;
3    flex-direction: column;
4}

column-reverse

Mit column-reverse stehen die Items ebenfalls untereinander, aber der Start liegt unten. Die Items werden von unten nach oben gestapelt.

1.container {
2    display: flex;
3    flex-direction: column-reverse;
4}

Die HTML-Reihenfolge der Elemente bleibt bei allen Werten gleich – nur die visuelle Anordnung ändert sich.

flex-wrap

Standardmäßig bleiben alle Flex-Items in einer Zeile – auch wenn der Container zu schmal wird. Mit flex-wrap steuerst du, ob Items in eine neue Zeile (oder Spalte) umbrechen dürfen.

Es gibt drei Werte:

• nowrap – alle Items in einer Zeile (Standard)
• wrap – Items brechen in die nächste Zeile um
• wrap-reverse – Items brechen um, neue Zeilen starten oben

Bei flex-wrap: wrap rutschen Items in die nächste Zeile, sobald horizontal kein Platz mehr ist. Die gestrichelte Linie in der Abbildung zeigt diesen Umbruch:

1.container {
2    display: flex;
3    flex-wrap: wrap;
4}

flex-wrap: wrap ist besonders nützlich für responsive Layouts – zum Beispiel bei Karten, Tags oder Button-Gruppen, die auf schmalen Bildschirmen untereinander stehen sollen.

justify-content

Mit justify-content steuerst du, wie Flex-Items entlang der Hauptachse verteilt werden – also in Richtung von flex-direction. Bei row ist das horizontal, bei column vertikal.

Die Grafik zeigt alle sechs Werte im Überblick:

• flex-start – Items am Anfang der Hauptachse (Standard, links bei row)
• flex-end – Items am Ende der Hauptachse (rechts bei row)
• center – Items in der Mitte, gleicher Abstand links und rechts
• space-between – erster Item am Start, letzter am Ende, Abstand gleichmäßig dazwischen
• space-around – gleicher Abstand um jedes Item (an den Rändern halb so viel)
• space-evenly – Abstand überall gleich – auch zwischen Items und Rändern

1.container {
2    display: flex;
3    justify-content: center;
4}

justify-content eignet sich besonders für Navigationen, Button-Leisten oder Footer, bei denen du Items links, rechts, zentriert oder gleichmäßig verteilt ausrichten willst.

align-items

Mit align-items steuerst du, wie Flex-Items entlang der Querachse ausgerichtet werden – also senkrecht zur Hauptachse. Bei row ist das vertikal, bei column horizontal.

Während justify-content die Verteilung in Laufrichtung regelt, bestimmt align-items, ob Items oben, unten, in der Mitte oder auf gleicher Textlinie stehen.

Die Grafik zeigt alle fünf Werte:

• flex-start – Items am Anfang der Querachse (oben bei row)
• flex-end – Items am Ende der Querachse (unten bei row)
• center – Items in der Mitte der Querachse
• stretch – Items auf volle Höhe des Containers strecken (Standard)
• baseline – Items an der Text-Baseline ausrichten (sinnvoll bei Text)

1.container {
2    display: flex;
3    align-items: center;
4}

Die Kombination aus justify-content und align-items eignet sich besonders zum Zentrieren von Inhalten – zum Beispiel justify-content: center und align-items: center für die perfekte Mitte eines Containers.

align-content

Mit align-content steuerst du, wie mehrere Zeilen von Flex-Items entlang der Querachse verteilt werden. Die Eigenschaft wirkt nur, wenn Items umbrechen – also wenn du flex-wrap: wrap setzt und mindestens zwei Zeilen entstehen.

Im Unterschied zu align-items richtest du damit nicht einzelne Items aus, sondern ganze Zeilen als Gruppe.

Die Grafik zeigt die wichtigsten Werte:

• flex-start – Zeilen am Anfang der Querachse (oben bei row)
• flex-end – Zeilen am Ende der Querachse (unten bei row)
• center – Zeilen in der Mitte des Containers
• stretch – Zeilen strecken sich über die volle Höhe
• space-between – erste Zeile oben, letzte unten, Abstand dazwischen
• space-around – gleicher Abstand um jede Zeile

1.container {
2    display: flex;
3    flex-wrap: wrap;
4    align-content: center;
5}

align-content brauchst du vor allem bei mehrzeiligen Flex-Layouts – zum Beispiel bei Karten-Rastern oder Tag-Listen, die auf mehrere Zeilen umbrechen.

gap, row-gap, column-gap

Mit gap legst du den Abstand zwischen Flex-Items fest – ohne extra margin an jedem Element. Der Abstand entsteht nur zwischen den Items, nicht am äußeren Rand des Containers.

Es gibt drei Eigenschaften:

• gap – Kurzform für row-gap und column-gap
• row-gap – Abstand zwischen den Zeilen
• column-gap – Abstand zwischen den Spalten

Die Grafik zeigt drei Varianten:

• gap: 10px – gleicher Abstand horizontal und vertikal
• gap: 30px – größerer, aber weiterhin gleicher Abstand in beide Richtungen
• gap: 10px 30px – erster Wert = row-gap, zweiter Wert = column-gap

1.container {
2    display: flex;
3    flex-wrap: wrap;
4    gap: 10px;
5}

1.container {
2    display: flex;
3    flex-wrap: wrap;
4    gap: 10px 30px;
5}

gap funktioniert in Flexbox und CSS Grid – und ist oft die einfachste Lösung für gleichmäßige Abstände bei Karten, Buttons oder Tag-Listen.