Was ist CSS Flexbox – und wozu brauchst du es?

Flexbox (offiziell „Flexible Box Layout“) ist ein CSS-Layoutmodul, das speziell dafür gemacht wurde, eine Gruppe von Elementen entlang einer Linie zu verteilen. Du sagst dem Container, in welche Richtung seine Kinder fließen sollen, wie der Platz dazwischen verteilt wird und wie sie sich ausrichten – den Rest erledigt der Browser.

Bevor es Flexbox gab, hat man Spalten mit float oder display: inline-block gebaut. Beides ist fummelig: vertikales Zentrieren war ein Albtraum, gleich hohe Spalten ein Hack. Mit Flexbox sind genau diese Aufgaben ein Einzeiler. Typische Einsätze:

• Navigationsleisten (Logo links, Menü rechts)
• Karten-Reihen, die sich gleichmäßig den Platz teilen
• Inhalte horizontal und vertikal mittig zentrieren
• Buttons, Icons und Text auf einer Linie ausrichten

So startest du: display:flex

Flexbox aktivierst du immer auf dem Container (dem Eltern-Element), nicht auf den Items. Eine einzige Zeile reicht:

.container {
  display: flex;
}

Ab jetzt liegen alle direkten Kinder von .container standardmäßig nebeneinander in einer Reihe. Das war's für den Anfang. Alle weiteren Eigenschaften verfeinern nur noch, wie diese Reihe sich verhält.

So sieht das aus: drei Boxen, die sich automatisch den Platz teilen – das ist gerendertes Flexbox, kein Bild.

Das Herzstück: Hauptachse und Querachse

Wenn du nur eine Sache aus diesem Guide mitnimmst, dann diese: Flexbox denkt in zwei Achsen. Verstehst du die, ergeben alle Eigenschaften sofort Sinn.

Der Clou: flex-direction dreht die Hauptachse. Setzt du column, läuft die Hauptachse plötzlich vertikal – und die Querachse horizontal. Genau deshalb steuern dieselben Eigenschaften je nach Richtung mal die Breite, mal die Höhe.

flex-direction – die Richtung bestimmen

.container {
  display: flex;
  flex-direction: row;    /* Standard: Reihe, links → rechts */
  /* column            Spalte, oben → unten      */
  /* row-reverse       Reihe, rechts → links     */
  /* column-reverse    Spalte, unten → oben      */
}

Die vier Eigenschaften, die du täglich brauchst

Items steuern: flex-grow, flex-shrink und flex-basis

Diese drei Eigenschaften gehören auf die Items (nicht den Container) und entscheiden, wie ein Item sich Platz nimmt:

• flex-grow – wie stark ein Item wächst, wenn Platz übrig ist (0 = gar nicht, 1 = nimmt seinen Anteil).
• flex-shrink – wie stark ein Item schrumpft, wenn der Platz knapp wird (Standard 1).
• flex-basis – die Ausgangsgröße vor dem Wachsen/Schrumpfen (z. B. 200px oder auto).

In der Praxis schreibst du fast immer die Kurzform flex. Diese drei Zeilen bedeuten dasselbe:

.item {
  flex: 1;          /* grow:1  shrink:1  basis:0  → alle teilen sich gleich auf */
}
.karte {
  flex: 1 1 250px;  /* startet bei 250px, darf wachsen und schrumpfen */
}
.fix {
  flex: 0 0 auto;   /* bleibt bei seiner natürlichen Größe, kein Wachsen/Schrumpfen */
}

Merksatz: flex: 1 auf mehreren Geschwistern macht sie gleich breit. flex: 1 1 250px auf Karten ergibt ein responsives Raster, das automatisch umbricht.

3 praktische Layouts zum Nachbauen

1. Navbar: Logo links, Menü rechts

Der Klassiker. justify-content: space-between drückt das erste und letzte Kind an die Ränder, align-items: center hält alles auf einer Linie.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
}
.navbar .menu {
  display: flex;
  gap: 1.25rem;
}

2. Karten-Reihe, die gleichmäßig aufgeht

Jede Karte startet bei 250 px, darf wachsen und bricht bei schmalen Bildschirmen um. So entsteht ein flexibles Raster ganz ohne Media Queries.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.cards .card {
  flex: 1 1 250px;   /* startet bei 250px, teilt sich den Rest */
}

3. Perfekt zentrieren – horizontal und vertikal

Die wohl meistgesuchte Antwort der CSS-Welt. Zwei Zeilen, fertig:

.center {
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertikal   */
  min-height: 100vh;
}

Dadurch sitzt jedes Kind exakt in der Mitte des Containers – kein Margin-Hack, kein transform nötig.

Flexbox vs. Grid – wann nimmst du was?

Beide sind moderne Layout-Werkzeuge und schließen sich nicht aus. Die Faustregel: Flexbox für eine Dimension, Grid für zwei.

In echten Projekten kombinierst du beides: Grid fürs grobe Seiten-Layout, Flexbox für die Feinverteilung innerhalb einer Grid-Zelle (etwa eine Karte mit Icon, Text und Button).

Häufige Fragen