Flexbox

Was ist Flexbox?

Flexbox ist ein CSS-Layout-Modell, das entwickelt wurde, um die Ausrichtung, Verteilung und Anordnung von Platz zwischen Elementen innerhalb eines Containers zu vereinfachen. Vor Flexbox waren Entwickler auf Floats, Positionierung und tabellenbasierte Layouts angewiesen, um selbst einfache Dinge wie das Zentrieren eines Divs oder das Erstellen einer Navigationsleiste mit gleich breiten Elementen umzusetzen. Diese Ansätze funktionierten zwar, waren aber fehleranfällig und umständlich. Flexbox hat die meisten davon durch ein sauberes, vorhersehbares System ersetzt.

Die Kernidee ist das Zwei-Achsen-Modell. Jeder Flex-Container hat eine Hauptachse (main axis) und eine Querachse (cross axis). Standardmäßig verläuft die Hauptachse horizontal und die Querachse vertikal, aber man kann diese mit flex-direction tauschen. Alles an Flexbox – Ausrichtung, Abstände, Zeilenumbrüche – wird in Bezug auf diese beiden Achsen beschrieben. Sobald man dieses mentale Modell versteht, werden die Eigenschaften intuitiv.

Flexbox ist zudem eindimensional. Es ordnet Elemente jeweils in einer einzigen Zeile oder einer einzigen Spalte an. Wenn Sie sowohl Zeilen als auch Spalten gleichzeitig steuern müssen, ist CSS Grid das bessere Werkzeug. Aber für die große Mehrheit der Layouts auf Komponentenebene – Navigationsleisten, Karten-Reihen, Formulargruppen, Footer – ist Flexbox genau das Richtige.

Flex-Container vs. Flex-Items

Flexbox funktioniert über eine Eltern-Kind-Beziehung. Sie verwandeln ein Elternelement in einen Flex-Container, indem Sie display: flex setzen. Die direkten Kinder werden automatisch zu Flex-Items und folgen fortan den Flexbox-Regeln.

/* style.css */
.container {
  display: flex;
}

.container > * {
  /* These are now flex items */
}

Diese Unterscheidung ist wichtig, da jede Flexbox-Eigenschaft entweder für den Container oder für die Items gilt – niemals für beides. Container-Eigenschaften steuern die Layout-Umgebung: Achsenrichtung, Ausrichtung, Zeilenumbruch und Abstände (Gap). Item-Eigenschaften steuern, wie sich einzelne Elemente innerhalb dieser Umgebung verhalten: wie stark sie wachsen oder schrumpfen, ihre Basisgröße und ihre Reihenfolge.

Ein Container kann zudem display: inline-flex verwenden, um sich wie ein Inline-Element zu verhalten und gleichzeitig Flexbox für seine Kinder zu nutzen. In der Praxis deckt display: flex (Block-Level) die meisten Anwendungsfälle ab.

flex-direction

flex-direction legt die Richtung der Hauptachse (main axis) fest. Es ist die grundlegendste Flexbox-Eigenschaft, da jede andere Eigenschaft davon abhängt, in welche Richtung die Hauptachse verläuft.

/* style.css */
.container {
  display: flex;
  flex-direction: row; /* default */
}

Die vier Werte:

• row — Elemente fließen von links nach rechts. Dies ist der Standardwert und der am häufigsten verwendete.
• row-reverse — Elemente fließen von rechts nach links.
• column — Elemente fließen von oben nach unten.
• column-reverse — Elemente fließen von unten nach oben.

/* style.css */
.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column-reverse {
  flex-direction: column-reverse;
}

Die Änderung von flex-direction tauscht die Rollen von Hauptachse und Querachse (cross axis). Wenn flex-direction auf row gesetzt ist, steuert justify-content die horizontale Verteilung und align-items die vertikale Ausrichtung. Wenn flex-direction auf column gesetzt ist, kehren sich diese Rollen um.

justify-content

justify-content richtet Flex-Items entlang der Hauptachse (main axis) aus. Es steuert, wie der überschüssige Platz zwischen oder um die Items verteilt wird.

/* style.css */
.container {
  display: flex;
  justify-content: center;
}

Die am häufigsten verwendeten Werte:

• flex-start — Items werden am Anfang der Hauptachse gruppiert (Standard).
• center — Items werden entlang der Hauptachse zentriert.
• flex-end — Items werden am Ende der Hauptachse gruppiert.
• space-between — Items werden gleichmäßig verteilt, mit maximalem Abstand dazwischen und ohne Platz an den Rändern.
• space-around — Items haben gleichmäßigen Platz um sich herum, sodass die Abstände zwischen den Items doppelt so groß sind wie die Abstände zu den Rändern.
• space-evenly — Items haben exakt den gleichen Abstand zwischen sich und zu den Rändern.

/* style.css */
.start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.between {
  justify-content: space-between;
}

.around {
  justify-content: space-around;
}

.evenly {
  justify-content: space-evenly;
}

space-between ist der am häufigsten genutzte Wert für Navigationsleisten – das Logo sitzt links, die Links rechts, mit dem Platz in der Mitte. space-evenly bietet eine ausgewogenere Verteilung für Elemente wie Icon-Leisten oder Tag-Listen.

align-items

align-items richtet Flex-Items entlang der Querachse (cross axis) aus. Während justify-content den Platz entlang der Hauptachse verteilt, steuert align-items, wie die Items innerhalb der Querachse positioniert werden.

/* style.css */
.container {
  display: flex;
  align-items: center;
}

Die wichtigsten Werte:

• stretch — Items dehnen sich aus, um die Querachse auszufüllen (Standard).
• flex-start — Items richten sich am Anfang der Querachse aus.
• center — Items werden entlang der Querachse zentriert.
• flex-end — Items richten sich am Ende der Querachse aus.
• baseline — Items richten sich nach ihrer Text-Baseline aus.

/* style.css */
.container {
  display: flex;
  align-items: stretch; /* default */
}

.centered {
  align-items: center;
}

.bottom {
  align-items: flex-end;
}

.baseline-aligned {
  align-items: baseline;
}

Der Wert baseline ist nützlich, wenn Items unterschiedliche Schriftgrößen oder Paddings haben – er stellt sicher, dass ihr Text an derselben unsichtbaren Linie ausgerichtet ist. Der Standardwert stretch ist der Grund, warum Flex-Items oft höher erscheinen als erwartet: Sie dehnen sich standardmäßig aus, um die Querachse auszufüllen.

align-content

align-content steuert, wie mehrere Zeilen von Flex-Items entlang der Querachse (cross axis) verteilt werden. Es hat nur dann eine Auswirkung, wenn flex-wrap auf wrap gesetzt ist und der Inhalt auf mehrere Zeilen umbricht.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Ohne flex-wrap: wrap bewirkt align-content nichts, da es nur eine einzige Zeile gibt. Wenn der Inhalt umbricht, spiegeln die Werte justify-content wider:

• flex-start — Zeilen werden am Anfang gruppiert.
• center — Zeilen werden entlang der Querachse zentriert.
• flex-end — Zeilen werden am Ende gruppiert.
• space-between — Zeilen werden gleichmäßig verteilt, mit maximalem Abstand dazwischen.
• space-around — Zeilen haben einen gleichmäßigen Abstand um sich herum.
• space-evenly — Zeilen haben exakt gleiche Abstände.
• stretch — Zeilen werden gestreckt, um den verfügbaren Platz auszufüllen.

Für einzeilige Flex-Container ist align-items die richtige Wahl. align-content wird für mehrzeilige Layouts wie Tag-Clouds oder umbrechende Button-Gruppen relevant.

flex-wrap

Standardmäßig versuchen Flex-Items, auf einer einzigen Zeile Platz zu finden. flex-wrap ermöglicht es, dass Items auf mehrere Zeilen umbrechen, wenn der Platz nicht mehr ausreicht.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
}

Die drei Werte:

• nowrap — alle Items bleiben in einer Zeile (Standard). Items können schrumpfen, um hineinzupassen.
• wrap — Items brechen bei Bedarf in neue Zeilen um.
• wrap-reverse — Items brechen in neue Zeilen um, aber die Richtung der Querachse (cross axis) ist umgekehrt.

/* style.css */
.single-line {
  flex-wrap: nowrap; /* default */
}

.multi-line {
  flex-wrap: wrap;
}

.reversed-wrap {
  flex-wrap: wrap-reverse;
}

Umbrüche sind essenziell für responsive Layouts. Eine Navigationsleiste mit vielen Links kann flex-wrap: wrap nutzen, damit die Items auf kleineren Bildschirmen in eine neue Zeile springen, anstatt über den Rand hinauszulaufen. In Kombination mit gap sehen umgebrochene Layouts auch ohne zusätzliche Margins sauber aus.

flex-grow, flex-shrink, flex-basis

Diese drei Eigenschaften steuern, wie Flex-Items den Platz entlang der Hauptachse aufteilen. Sie arbeiten zusammen, um die endgültige Größe jedes Elements zu bestimmen.

flex-basis legt die ursprüngliche Größe eines Elements fest, bevor der zusätzliche Platz verteilt wird. Es funktioniert ähnlich wie width, wird aber vom Flexbox-Algorithmus berücksichtigt.

/* style.css */
.item {
  flex-basis: 200px;
}

flex-grow steuert, wie stark ein Element expandiert, um den verfügbaren Platz auszufüllen. Der Standardwert ist 0, was bedeutet, dass Elemente nicht wachsen. Ein Wert von 1 bedeutet, dass das Element einen gleichen Anteil am verbleibenden Platz erhält.

/* style.css */
.item-a {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2; /* takes twice as much leftover space as item-a */
}

flex-shrink steuert, wie stark ein Element schrumpft, wenn nicht genügend Platz vorhanden ist. Der Standardwert ist 1, was bedeutet, dass Elemente proportional schrumpfen. Ein Wert von 0 verhindert das Schrumpfen.

/* style.css */
.item {
  flex-shrink: 0; /* will not shrink, may overflow */
}

Die Kurzschreibweise flex kombiniert alle drei Eigenschaften:

/* style.css */
.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

.item {
  flex: 0 0 200px; /* no grow, no shrink, fixed 200px */
}

Die flex: 1 Kurzschreibweise ist eines der nützlichsten Muster in Flexbox – sie gibt jedem Element einen gleichen Anteil am verfügbaren Platz, was ideal für gleich breite Spalten, Split-Views und responsive Grids ist.

order-Property

Standardmäßig erscheinen Flex-Items in der Reihenfolge, in der sie im HTML aufgeführt sind. Mit der order-Property lassen sie sich visuell neu anordnen, ohne den DOM zu verändern.

/* style.css */
.item-a {
  order: 2;
}

.item-b {
  order: 1; /* appears first visually */
}

.item-c {
  order: 3; /* appears last visually */
}

Alle Items haben standardmäßig den Wert order: 0. Niedrigere Zahlen erscheinen zuerst. Items mit demselben Order-Wert werden in der Reihenfolge der Quelldatei angezeigt. Negative Werte sind zulässig und platzieren Items vor jenen mit dem Standardwert.

Dies ist besonders nützlich für responsive Designs, bei denen eine Sidebar auf Mobilgeräten über dem Hauptinhalt, auf dem Desktop jedoch darunter erscheinen soll – ändern Sie in diesem Fall die order mittels einer Media Query, anstatt das HTML umzustrukturieren.

gap-Property

Die gap-Property fügt konsistente Abstände zwischen Flex-Items hinzu. Sie ersetzt die alten Margin-Hacks, die früher für Abstände in Flex-Layouts notwendig waren.

/* style.css */
.container {
  display: flex;
  gap: 1rem;
}

Du kannst unterschiedliche Werte für Zeilen- und Spaltenabstände festlegen:

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 2rem;
}

Im Gegensatz zu Margins fügt gap nur Platz zwischen den Items hinzu – nicht vor dem ersten oder nach dem letzten Item. Das macht das Layout vorhersehbar und macht negative Margins oder zusätzliche Wrapper-Elemente überflüssig. Es funktioniert sowohl bei einzeiligen als auch bei mehrzeiligen Flex-Layouts.

Gängige Flexbox-Patterns

Sobald man die Properties kennt, ergeben sich die Patterns fast von selbst. Hier sind die häufigsten Layouts, die mit Flexbox gelöst werden.

Inhalte zentrieren:

/* style.css */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Das ist der klassische Flexbox-Move – ein Kindelement wird sowohl horizontal als auch vertikal innerhalb seines Parents zentriert. Vor Flexbox war die vertikale Zentrierung ein berüchtigtes Problem.

Navigationsleisten:

/* style.css */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

Das Logo sitzt links, die Links rechts und alles bleibt vertikal zentriert. Durch das Hinzufügen von gap zu den Links werden diese gleichmäßig verteilt.

Card-Layouts:

/* style.css */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
}

Cards wachsen, um den verfügbaren Platz auszufüllen, schrumpfen bei Bedarf und brechen auf kleineren Bildschirmen in neue Zeilen um. Die 300px basis legt eine komfortable Mindestbreite fest.

Holy Grail Layout:

/* style.css */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

Die Seite ist eine Spalte, die den Viewport ausfüllt. Der mittlere Bereich ist eine Zeile mit einer Sidebar mit fester Breite und einem flexiblen Hauptbereich. Dieses Pattern war vor Flexbox extrem schwierig umzusetzen.

Wann man Flexbox vs. Grid verwendet

Flexbox und CSS Grid ergänzen sich, anstatt miteinander zu konkurrieren. Die einfachste Faustregel: Nutze Flexbox für eine Dimension, Grid für zwei.

Nutze Flexbox, wenn:

• Du Elemente in einer einzigen Reihe oder Spalte anordnest.
• Du Platz zwischen Elementen ausrichten oder verteilen musst.
• Du Layouts auf Komponenten-Ebene erstellst: Navigationsleisten, Button-Gruppen, Formularzeilen, Karten-Reihen.
• Du möchtest, dass Elemente natürlich in neue Zeilen umbrechen.
• Du Inhalte zentrieren musst.

Nutze Grid, wenn:

• Du sowohl Zeilen als auch Spalten gleichzeitig steuern musst.
• Du Layouts auf Seiten-Ebene mit Header, Sidebar, Main und Footer erstellst.
• Du eine explizite Platzierung von Elementen in einem Raster wünschst.
• Du Tracks benötigst, deren Größe auf dem Grid-Container und nicht auf dem Inhalt basiert.

In der Praxis nutzen die meisten Projekte beides. Ein Seitenlayout verwendet Grid für die Gesamtstruktur, während einzelne Komponenten innerhalb dieses Layouts Flexbox für die interne Ausrichtung nutzen. Sie lösen unterschiedliche Probleme und funktionieren hervorragend zusammen.

Best Practices

• Nutze gap anstelle von margins — dies fügt nur Platz zwischen den Elementen hinzu und vermeidet Probleme mit Abständen an den Außenkanten.
• Nutze die flex-Kurzschreibweise — flex: 1 ist sauberer, als grow, shrink und basis separat zu definieren.
• Vermeide feste Breiten bei flex items — überlasse die Größenberechnung für die Responsivität flex-basis und flex-grow.
• Bevorzuge flex-wrap: wrap für responsive Layouts anstelle von Media Queries für die Elementgröße.
• Nutze align-items: center für die vertikale Zentrierung — dies ist der zuverlässigste Ansatz.
• Kombiniere dies mit min-width: 0 bei flex items, die überlaufen könnten — standardmäßig schrumpfen flex items nicht unter die Größe ihres Inhalts.
• Nutze semantisches HTML innerhalb von flex containers — Flexbox steuert das Layout, nicht die Bedeutung.
• Teste mit unterschiedlichen Inhaltslängen — Flexbox-Layouts sollten sich sowohl an kurzen als auch an langen Inhalten elegant anpassen.

Häufige Fehler

• display: flex auf den Elementen statt auf dem Container setzen.
• Vergessen, dass align-content flex-wrap: wrap benötigt, um überhaupt eine Wirkung zu haben.
• Verwendung von festen width bei Flex-Items anstelle von flex-basis.
• min-width: 0 bei Elementen nicht setzen, die ihren Flex-Container überlaufen könnten.
• Übermäßiger Einsatz von !important, um die Größe von Flex-Items zu erzwingen, anstatt den Flex-Algorithmus zu verstehen.
• Anwendung von Flexbox-Eigenschaften auf die falsche Achse – dabei wird vergessen, dass flex-direction die Haupt- und Querachse vertauscht.
• Barrierefreiheit ignorieren – Flexbox ändert mit order zwar die visuelle Reihenfolge, aber nicht die DOM-Reihenfolge, sodass Screenreader weiterhin der Quelle folgen.

Lohnt es sich 2026 immer noch, Flexbox zu lernen?

Absolut. Flexbox ist kein vorübergehender Trend – es ist das fundamentale Layout-System für modernes CSS. Jedes große Framework, jede Komponenten-Bibliothek und jedes Design-System stützt sich darauf. CSS Grid ergänzt Flexbox bei zweidimensionalen Layouts, aber Flexbox bleibt der Standard für die Ausrichtung, Abstände und Verteilung auf Komponenten-Ebene. Das Verständnis von Flexbox erleichtert zudem das Erlernen von Grid, da das Achsenmodell und die Alignment-Properties direkt übernommen werden. Wenn du irgendetwas für das Web entwickelst, ist Flexbox eine Fähigkeit, die du jeden Tag einsetzen wirst.

Flexbox lernen

Flexbox ist visuell, daher lernt man es am besten, indem man es in Aktion sieht:

1. Beginnen Sie mit display: flex und justify-content – sehen Sie, wie Elemente entlang einer Achse verteilt werden.
2. Fügen Sie align-items hinzu – verstehen Sie die Querachse und wie sie mit flex-direction zusammenhängt.
3. Experimentieren Sie mit flex-direction: column – sehen Sie, wie die Achsen getauscht werden.
4. Probieren Sie flex-wrap: wrap und gap aus – erstellen Sie ein mehrzeiliges Layout.
5. Spielen Sie mit flex-grow, flex-shrink und flex-basis – verstehen Sie, wie Elemente den Platz untereinander aufteilen.
6. Erstellen Sie echte Layouts: eine Navbar, eine Karten-Reihe, einen zentrierten Hero-Bereich, ein Sidebar-Layout.
7. Nutzen Sie ein interaktives Tool wie Flexbox Froggy oder den Flexbox Guide von CSS Tricks, um jede Eigenschaft zu visualisieren.

Gehen Sie von dort aus zu CSS Grid für zweidimensionale Layouts über. Unser interaktives CSS-Tutorial deckt Flexbox, Grid und responsives Design mit praktischen Übungen ab.