CSS Flexbox: Das komplette Guide

Flexbox macht komplexe Layouts einfach. Zentrieren, Verteilen, Ausrichten – alles mit wenigen CSS-Eigenschaften. Hier lernen Sie alles Wichtige.

Flexbox aktivieren

.container {
  display: flex;
  /* oder inline-flex für Inline-Container */
}

Die zwei Achsen

┌─────────────────────────────────────────┐
│                                         │
│  ←────── Main Axis (Hauptachse) ──────→ │
│                                         │
│  ↑                                      │
│  │                                      │
│  │ Cross Axis                           │
│  │ (Querachse)                          │
│  │                                      │
│  ↓                                      │
│                                         │
└─────────────────────────────────────────┘

Container-Eigenschaften

flex-direction

.container {
  flex-direction: row;            /* Standard: horizontal → */
  flex-direction: row-reverse;    /* horizontal ← */
  flex-direction: column;         /* vertikal ↓ */
  flex-direction: column-reverse; /* vertikal ↑ */
}

flex-wrap

.container {
  flex-wrap: nowrap;       /* Standard: alles in einer Zeile */
  flex-wrap: wrap;         /* Umbruch wenn nötig */
  flex-wrap: wrap-reverse; /* Umbruch, aber umgekehrte Reihenfolge */
}

justify-content (Hauptachse)

.container {
  justify-content: flex-start;    /* Am Anfang */
  justify-content: flex-end;      /* Am Ende */
  justify-content: center;        /* Zentriert */
  justify-content: space-between; /* Gleichmäßig, außen kein Abstand */
  justify-content: space-around;  /* Gleichmäßig, halber Abstand außen */
  justify-content: space-evenly;  /* Komplett gleichmäßig */
}

/* Visualisierung für justify-content */

flex-start:    |■ ■ ■        |
flex-end:      |        ■ ■ ■|
center:        |    ■ ■ ■    |
space-between: |■     ■     ■|
space-around:  | ■   ■   ■ |
space-evenly:  |  ■  ■  ■  |

align-items (Querachse)

.container {
  align-items: stretch;    /* Standard: volle Höhe */
  align-items: flex-start; /* Oben */
  align-items: flex-end;   /* Unten */
  align-items: center;     /* Mittig */
  align-items: baseline;   /* Text-Baseline */
}

align-content (mehrere Zeilen)

.container {
  flex-wrap: wrap;
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

gap (Abstände)

.container {
  gap: 20px;              /* Alle Richtungen */
  gap: 20px 10px;         /* row-gap column-gap */
  row-gap: 20px;          /* Nur Zeilen */
  column-gap: 10px;       /* Nur Spalten */
}

Item-Eigenschaften

flex-grow

/* Wie viel vom verfügbaren Platz nehmen */
.item { flex-grow: 0; }  /* Standard: nicht wachsen */
.item { flex-grow: 1; }  /* Gleichmäßig wachsen */

/* Unterschiedliches Wachstum */
.item-1 { flex-grow: 1; }  /* 1 Teil */
.item-2 { flex-grow: 2; }  /* 2 Teile */

flex-shrink

/* Wie stark schrumpfen wenn nötig */
.item { flex-shrink: 1; }  /* Standard: schrumpft */
.item { flex-shrink: 0; }  /* Nicht schrumpfen */

flex-basis

/* Anfangsgröße vor Wachsen/Schrumpfen */
.item { flex-basis: auto; }   /* Standard: basiert auf Inhalt */
.item { flex-basis: 200px; }  /* Feste Anfangsgröße */
.item { flex-basis: 25%; }    /* Prozentual */

flex (Shorthand)

/* flex: grow shrink basis */
.item { flex: 0 1 auto; }   /* Standard */
.item { flex: 1; }          /* flex: 1 1 0 */
.item { flex: auto; }       /* flex: 1 1 auto */
.item { flex: none; }       /* flex: 0 0 auto */

align-self

/* Überschreibt align-items für einzelnes Item */
.item {
  align-self: auto;       /* Standard: von Container */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
}

order

/* Reihenfolge ändern (Standard: 0) */
.item-1 { order: 2; }
.item-2 { order: 1; }
.item-3 { order: 3; }
/* Anzeige: item-2, item-1, item-3 */

Praktische Beispiele

Perfekte Zentrierung

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Navigation

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

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

Card Layout

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* Min 300px, wächst gleichmäßig */
  max-width: 400px;
}

Footer am unteren Rand

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* Nimmt allen verfügbaren Platz */
}

footer {
  /* Bleibt unten */
}

Holy Grail Layout

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

header, footer {
  flex: 0 0 100%;
}

nav {
  flex: 0 0 200px;
  order: -1;
}

main {
  flex: 1;
  min-width: 0;
}

aside {
  flex: 0 0 200px;
}

Flexbox vs. Grid

Browser-Support

Flexbox wird von allen modernen Browsern unterstützt (IE11 mit Einschränkungen).

Weitere Informationen

• 🎨 CSS Grid Layout
• 📱 Responsive Design