Flexbox kam um 2015 in alle gängigen Browser und löste sofort das Problem, mit dem Entwickler seit einem Jahrzehnt gekämpft hatten: die vertikale Zentrierung. Die meisten Leute lernten es jedoch rückwärts — sie memorierten justify-content: center aus einem Spickzettel, ohne zu verstehen, warum es funktioniert. Wenn das Layout sich nicht so verhält wie erwartet, verwandelt diese Wissenslücke eine Fünf-Minuten-Aufgabe in eine Stunde Versuch und Irrtum. Dieser Leitfaden baut zuerst das mentale Modell auf und behandelt dann alle Eigenschaften, die in realen Projekten wirklich wichtig sind.

Das Mentale Modell: Eine Achse nach der Anderen

Das Kernkonzept von Flexbox ist, dass Elemente entlang einer einzigen Achse angeordnet werden. Es gibt eine Hauptachse — die Richtung, in der Elemente fließen — und eine Querachse, die senkrecht dazu verläuft. Der kritische Einblick, den fast jeder Anfänger vermisst: flex-direction bestimmt, welche Achse welche ist. Alles andere folgt daraus.

css
/* Default: main axis runs LEFT → RIGHT, cross axis runs TOP → BOTTOM */
.container {
  display: flex;
  flex-direction: row; /* default */
}

/* Rotated: main axis now runs TOP → BOTTOM, cross axis runs LEFT → RIGHT */
.container {
  display: flex;
  flex-direction: column;
}

/*
  justify-content  →  controls alignment on the MAIN axis
  align-items      →  controls alignment on the CROSS axis

  This is why centering something in both axes looks like this:
*/
.center-both {
  display: flex;
  justify-content: center; /* horizontally centred (main axis = row) */
  align-items: center;     /* vertically centred (cross axis)        */
}
Die Verwirrung, die jeden erwischt: Wenn Sie zu flex-direction: column wechseln, steuert justify-content nicht mehr die horizontale Ausrichtung — es steuert die vertikale Ausrichtung, weil sich die Hauptachse gedreht hat. align-items steuert nun das Horizontale. Denken Sie an diese Rotation, wenn etwas nicht so ausgerichtet ist, wie Sie es erwarten.

Container-Eigenschaften

Diese Eigenschaften gehören auf den Flex-Container — das übergeordnete Element mit display: flex. Sie steuern, wie alle untergeordneten Elemente verteilt und ausgerichtet werden.

css
/* display: flex makes the element a block-level flex container.
   display: inline-flex makes it inline (sits in text flow). */
.nav {
  display: flex;
}

/* flex-direction — which way does the main axis run? */
.nav {
  flex-direction: row;         /* left to right (default)  */
  flex-direction: row-reverse; /* right to left            */
  flex-direction: column;      /* top to bottom            */
  flex-direction: column-reverse; /* bottom to top         */
}

/* flex-wrap — what happens when items overflow the container? */
.card-grid {
  flex-wrap: nowrap;       /* all items forced onto one line (default) */
  flex-wrap: wrap;         /* items wrap onto additional lines         */
  flex-wrap: wrap-reverse; /* items wrap in reverse order              */
}

/* gap — space between items. Modern approach; avoids margin hacks. */
.card-grid {
  gap: 1.5rem;             /* same in both directions              */
  gap: 1rem 2rem;          /* row-gap column-gap                   */
}

Die gap-Eigenschaft verdient besondere Erwähnung. Bevor es sie gab, war das übliche Muster, Flex-Elementen Abstände hinzuzufügen und dann die äußeren Kanten mit negativen Abständen aufzuheben. gap ersetzt das alles sauber — verwenden Sie es überall stattdessen.

css
/* justify-content — alignment on the MAIN axis */
.nav {
  justify-content: flex-start;    /* packed to start (default)              */
  justify-content: flex-end;      /* packed to end                          */
  justify-content: center;        /* packed to centre                       */
  justify-content: space-between; /* first/last at edges, equal gaps between */
  justify-content: space-around;  /* equal space around each item           */
  justify-content: space-evenly;  /* equal space between every gap          */
}

/* align-items — alignment on the CROSS axis (single line) */
.nav {
  align-items: stretch;   /* items fill cross-axis height (default)         */
  align-items: flex-start;/* items align to start of cross axis             */
  align-items: flex-end;  /* items align to end of cross axis               */
  align-items: center;    /* items centred on cross axis                    */
  align-items: baseline;  /* items aligned by their text baseline           */
}

/* align-content — cross-axis alignment when there are MULTIPLE lines
   (only takes effect with flex-wrap: wrap and enough items to wrap) */
.card-grid {
  flex-wrap: wrap;
  align-content: flex-start;    /* rows packed to top                       */
  align-content: center;        /* rows centred vertically                  */
  align-content: space-between; /* rows spread out with space between       */
}

Hier ist eine echte Navigationsleiste, die diese kombiniert. Das Logo sitzt links, und die Navigationslinks werden mit margin-left: auto nach rechts verschoben — ein klassischer Flexbox-Trick. Der Ansatz justify-content: space-between funktioniert ebenfalls, aber die Auto-Margin-Technik ist flexibler, wenn Sie mehr als zwei Gruppen haben.

css
/* Nav: logo left, links right */
.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  height: 64px;
  background: #1a1a2e;
}

.site-nav .logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto; /* pushes everything after it to the right */
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.site-nav .nav-links a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
}

.site-nav .nav-links a:hover {
  color: #fff;
}

Element-Eigenschaften

Diese Eigenschaften gehören auf die Flex-Elemente — die direkten Kinder des Flex-Containers. Sie steuern, wie einzelne Elemente wachsen, schrumpfen und sich dimensionieren.

  • flex-grow — wie viel des verfügbaren freien Platzes dieses Element beansprucht. Standard 0 (nicht wachsen). Auf 1 setzen und es nimmt den gesamten verbleibenden Platz ein.
  • flex-shrink — wie viel dieses Element im Verhältnis zu anderen schrumpft, wenn nicht genug Platz vorhanden ist. Standard 1. Auf 0 setzen, um das Schrumpfen eines Elements zu verhindern.
  • flex-basis — die Anfangsgröße des Elements vor einem Wachstum oder Schrumpfen. Kann eine Länge (250px, 30%) oder auto (Inhaltsgröße des Elements verwenden) sein.
  • align-self — überschreibt align-items für ein bestimmtes Element. Akzeptiert dieselben Werte: auto, flex-start, flex-end, center, baseline, stretch.
  • order — ändert die visuelle Reihenfolge, ohne das HTML anzufassen. Standard 0. Niedrigere Werte erscheinen zuerst. Sparsam verwenden — es unterbricht die Tab-Reihenfolge und verursacht Zugänglichkeitsprobleme für Tastatur- und Screenreader-Benutzer.
css
/* Classic sidebar + main content layout */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 280px; /* don't grow, don't shrink, always 280px wide */
  background: #f5f5f5;
  padding: 2rem 1.5rem;
}

.main-content {
  flex: 1; /* grow to fill all remaining space */
  padding: 2rem;
  min-width: 0; /* critical: prevents content overflow in flex children */
}

/* Responsive: stack vertically on mobile */
@media (max-width: 768px) {
  .app-layout {
    flex-direction: column;
  }

  .sidebar {
    flex: none; /* reset — don't use flex-basis on column layout */
  }
}
Das min-width: 0-Problem: Standardmäßig können Flex-Elemente nicht unter ihre minimale Inhaltsgröße schrumpfen. Wenn Sie ein langes Wort oder eine breite Tabelle in einem Flex-Element haben, wird es überlaufen statt umzubrechen. Das Hinzufügen von min-width: 0 zum Flex-Element behebt dies. Es tritt ständig beim Hauptinhaltsbereich in Sidebar-Layouts auf.

Die flex-Kurzschreibweise erklärt

Die flex-Kurzschreibweise packt flex-grow, flex-shrink und flex-basis in eine Deklaration. Die W3C-Spezifikation definiert einige Schlüsselwortwerte, die die gängigen Fälle abdecken, und diese werden häufig miteinander verwechselt.

css
/* flex: 1
   Expands to: flex-grow: 1; flex-shrink: 1; flex-basis: 0%
   Meaning: grow and shrink freely; start from zero (ignore content size).
   All items with flex: 1 share space equally, regardless of content.
   Most common choice for "fill available space". */
.tab { flex: 1; }

/* flex: auto
   Expands to: flex-grow: 1; flex-shrink: 1; flex-basis: auto
   Meaning: grow and shrink freely; start from the item's content size.
   Items with more content get more space — proportional, not equal. */
.column { flex: auto; }

/* flex: none
   Expands to: flex-grow: 0; flex-shrink: 0; flex-basis: auto
   Meaning: completely rigid — don't grow, don't shrink, stay at content size.
   Use for items that should never flex (icons, avatars, fixed labels). */
.avatar { flex: none; }

/* flex: 0 0 200px
   Explicit: don't grow, don't shrink, always exactly 200px.
   Same as writing out all three values. More readable for fixed-size items. */
.sidebar { flex: 0 0 200px; }

/* Practical difference: flex: 1 vs flex: auto in a tab bar
   With flex: 1  → all tabs are equal width regardless of label length
   With flex: auto → "Settings" tab is wider than "Home" tab */
.tabs { display: flex; }
.tab-equal  { flex: 1;    } /* equal width tabs     */
.tab-auto   { flex: auto; } /* content-sized tabs   */

Häufige Reale Layouts

Hier sind vier Muster, die Sie regelmäßig verwenden werden — nur mit Flexbox gebaut.

css
/* 1. Sticky footer
   The footer always sits at the bottom, even on short pages.
   body (or .app-shell) becomes a column flex container. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1; /* expands to push footer down */
}

footer {
  /* stays at the bottom */
}
css
/* 2. Centred modal / hero content
   Both axes centred — the Flexbox vertical-centring party trick. */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.hero-content {
  max-width: 640px;
  text-align: center;
  color: #fff;
}
css
/* 3. Nav bar: logo left, links right */
.site-nav {
  display: flex;
  align-items: center;
  padding: 0 2rem;
  height: 64px;
}

.site-nav .nav-links {
  margin-left: auto; /* auto margin consumes all free space to its left */
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}
css
/* 4. Card row that wraps on mobile */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 280px; /* grow and shrink, but never below 280px wide */
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* On wide screens: 3-4 cards per row.
   On narrow screens: cards wrap into their own rows automatically.
   No media query needed for the wrap itself — flex-wrap handles it. */

Flexbox vs Grid — Wann Was verwenden

Diese Frage taucht ständig auf, und die Antwort ist einfacher als die meisten Artikel es darstellen: Flexbox ist für eindimensionale Layouts. CSS Grid ist für zweidimensionale Layouts. Wenn Sie Elemente in einer einzelnen Zeile oder einer einzelnen Spalte anordnen — eine Navigationsleiste, eine Schaltflächengruppe, eine Kartenreihe — ist Flexbox das richtige Werkzeug. Wenn Sie Zeilen und Spalten gleichzeitig steuern müssen — ein vollständiges Seitenlayout, ein Fotomosaik, ein Formulargitter — greifen Sie zu Grid.

In der Praxis werden Sie beides im gleichen Projekt verwenden. Grid verwaltet die Seitenstruktur (Kopfzeile, Sidebar, Hauptbereich, Fußzeile). Flexbox verwaltet die Komponenten in diesen Bereichen (die Navigationsleiste, den Karteninhalt, die Schaltflächengruppe in einem Modal). Sie ergänzen sich eher, als dass sie konkurrieren.

Der graue Bereich: Kartenraster, die gleich hohe Zeilen mit in Spalten ausgerichteten Elementen haben sollen. Flexbox mit flex-wrap: wrap kann das, aber Elemente in derselben visuellen Zeile haben keine Beziehung zueinander — ihre Höhen sind unabhängig. Die implizite Zeilenbemessung von Grid verwaltet dies automatisch. Wenn die Karten in einer umgebrochenen Zeile alle gleich hoch sein müssen UND ihre internen Elemente über Karten hinweg ausgerichtet sein sollen, ist Grid sauberer.

Zusammenfassung

Das mentale Flexbox-Modell lautet: Wählen Sie eine Richtung, verstehen Sie, welche Eigenschaften welche Achse steuern, und entscheiden Sie dann, ob Elemente wachsen, schrumpfen oder fest bleiben sollen. Sobald das klar ist, wird der Spickzettel eine Nachschlageressource — keine Krücke. Der MDN Flexbox-Leitfaden ist die beste Referenz für Grenzfälle, und der vollständige CSS-Tricks-Leitfaden ist nach wie vor der nützlichste visuelle Spickzettel. Für den Produktionseinsatz ist die Browserunterstützung nahezu universell — keine Präfixe erforderlich. Die W3C-Spezifikation ist einen schnellen Blick wert, wenn Sie auf einen wirklich verwirrenden Grenzfall stoßen — der Algorithmus ist präzise dokumentiert und beantwortet die meisten „Warum verhält sich das so"-Fragen.

← All CSS articles Browse all categories →