Flexbox Container

Flexbox ist das meistgenutzte Layout-System in CSS. Mit display: flex verwandelst du ein Element in einen Flex-Container, dessen Kinder sich automatisch nebeneinander anordnen. Im Gegensatz zu Floats oder Inline-Block brauchst du keine Hacks: Flexbox gibt dir volle Kontrolle über Richtung, Umbruch und Reihenfolge. In diesem Artikel lernst du die Container-Eigenschaften flex-direction, flex-wrap und die Shorthand flex-flow.

Steckbrief Flexbox Container

Syntax: display: flex | inline-flex
Initialwert: (siehe Einzeleigenschaften)
Vererbt: Nein
Animierbar: Nein

Kategorie: Flexbox
Werte: 10
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

Wenn du display: flex auf ein Element setzt, passieren drei Dinge: Die direkten Kinder werden zu Flex-Items, sie ordnen sich standardmäßig in einer Zeile nebeneinander an, und sie schrumpfen bei Bedarf, damit alles in eine Zeile passt.

Das Besondere an Flexbox ist das Konzept von Achsen. Die Hauptachse (main axis) bestimmt die Richtung, in der die Items fließen. Die Querachse (cross axis) steht senkrecht dazu. flex-direction legt die Hauptachse fest, und alle Ausrichtungseigenschaften beziehen sich auf diese Achsen.

display: flex erzeugt einen Block-Level-Container. Wenn du einen Inline-Container brauchst (z.B. in einem Textfluss), verwende display: inline-flex.

Haupt- und Querachse

Das Achsen-Konzept ist das Fundament von Flexbox. Wenn du flex-direction: row setzt (Standard), läuft die Hauptachse horizontal von links nach rechts. Die Querachse läuft vertikal von oben nach unten. Bei flex-direction: column dreht sich alles: Die Hauptachse geht vertikal, die Querachse horizontal.

Das ist wichtig, weil justify-content immer entlang der Hauptachse arbeitet und align-items entlang der Querachse. Bei row ist justify-content also horizontal, bei column vertikal.

Syntax & Werte

10 Werte

flex-direction

Wert	Beschreibung	Beispiel
`row`	Items werden horizontal von links nach rechts angeordnet (Standard).	flex-direction: row
`row-reverse`	Items werden horizontal von rechts nach links angeordnet.	flex-direction: row-reverse
`column`	Items werden vertikal von oben nach unten angeordnet.	flex-direction: column
`column-reverse`	Items werden vertikal von unten nach oben angeordnet.	flex-direction: column-reverse

flex-wrap

Wert	Beschreibung	Beispiel
`nowrap`	Alle Items bleiben in einer Zeile und schrumpfen bei Bedarf (Standard).	flex-wrap: nowrap
`wrap`	Items brechen in die nächste Zeile um, wenn der Platz nicht reicht.	flex-wrap: wrap
`wrap-reverse`	Items brechen um, aber die neuen Zeilen erscheinen oberhalb der ersten.	flex-wrap: wrap-reverse

flex-flow (Shorthand)

Wert	Beschreibung	Beispiel
`<flex-direction> <flex-wrap>`	Kombiniert flex-direction und flex-wrap in einer Deklaration.	flex-flow: row wrap
`column nowrap`	Vertikale Anordnung ohne Umbruch.	flex-flow: column nowrap
`row-reverse wrap`	Umgekehrte Reihenfolge mit Zeilenumbruch.	flex-flow: row-reverse wrap

Beispiele

4 Beispiele

display: flex erzeugt einen Block-Container (nimmt die volle Breite ein), display: inline-flex erzeugt einen Inline-Container (nur so breit wie nötig).

flex vs. inline-flex

/* Block-Container: volle Breite */
.flex-container {
  display: flex;
  gap: 8px;
}

/* Inline-Container: nur so breit wie nötig */
.inline-flex-container {
  display: inline-flex;
  gap: 8px;
}

<div class="demo">
<div class="label">display: flex (volle Breite)</div>
<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<div class="label">display: inline-flex (nur so breit wie nötig)</div>
<div class="inline-flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
</div>

Mit flex-direction bestimmst du, ob die Items horizontal oder vertikal angeordnet werden.

row vs. column

/* Horizontal (Standard) */
.row { display: flex; flex-direction: row; }

/* Vertikal */
.column { display: flex; flex-direction: column; }

<div class="demo">
<div class="example">
  <div class="example-label">flex-direction: row</div>
  <div class="row-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>
<div class="example">
  <div class="example-label">flex-direction: column</div>
  <div class="column-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>
</div>

Ohne flex-wrap quetschen sich alle Items in eine Zeile. Mit wrap brechen sie bei Bedarf in die nächste Zeile um.

nowrap vs. wrap

/* Items werden gestaucht (Standard) */
.nowrap { display: flex; flex-wrap: nowrap; }

/* Items brechen in die nächste Zeile um */
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }

<div class="demo">
<div class="label">flex-wrap: nowrap (Standard), Items werden gestaucht</div>
<div class="nowrap-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
<div class="label">flex-wrap: wrap, Items brechen um</div>
<div class="wrap-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
</div>

flex-flow kombiniert flex-direction und flex-wrap in einer Zeile.

flex-flow: column wrap

.container {
  display: flex;
  flex-flow: column wrap;
  height: 140px;
  gap: 8px;
}

/* Entspricht: */
/* flex-direction: column; */
/* flex-wrap: wrap; */

<div class="demo">
<div class="flow-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>
</div>

Barrierefreiheit

Wichtig: flex-direction: row-reverse und column-reverse ändern nur die visuelle Reihenfolge der Items, nicht die DOM-Struktur. Screenreader und Tastaturnavigation folgen weiterhin der HTML-Reihenfolge. Das bedeutet: Was du siehst, ist nicht unbedingt das, was ein Screenreader vorliest oder wie ein Tastaturnutzer durch die Seite navigiert.

WCAG 1.3.2 (Meaningful Sequence) verlangt, dass die logische Lesereihenfolge mit der visuellen Reihenfolge übereinstimmt. Wenn du row-reverse oder column-reverse einsetzt, überprüfe immer, ob die Tab-Reihenfolge noch Sinn ergibt. Nutze diese Eigenschaften nur für dekorative Layouts, nie für semantisch wichtige Inhalte wie Navigationen oder Formulare.

Auch flex-wrap: wrap kann die visuelle Reihenfolge verändern, wenn Items in die nächste Zeile umbrechen. Stelle sicher, dass die DOM-Reihenfolge in allen Viewport-Breiten logisch bleibt.

Häufige Fehler

5 Fehler

01 Flexbox auf das falsche Element setzen

display: flex wirkt nur auf die direkten Kinder. Wenn du ein Enkelelement ausrichten willst, musst du auch dessen Elternelement zum Flex-Container machen.

02 Flex-Items schrumpfen unerwartet

Standardmäßig haben Flex-Items flex-shrink: 1. Das heißt, sie schrumpfen, wenn der Platz knapp wird. Wenn du das nicht willst, setze flex-shrink: 0 oder min-width: 0.

03 Vergessen, dass flex-wrap: nowrap der Standard ist

Wenn deine Items über den Container hinausragen oder gestaucht werden, liegt es meistens daran, dass flex-wrap nicht auf wrap gesetzt ist.

04 Achsen-Verwirrung bei column

Bei flex-direction: column dreht sich alles. justify-content wirkt jetzt vertikal und align-items horizontal. Das überrascht viele Anfänger.

05 inline-flex statt flex verwenden

inline-flex ist für Spezialfälle (z.B. Badges im Text). Für normale Layouts willst du fast immer display: flex.

Browser-Kompatibilität

5 von 5

Flexbox wird von allen modernen Browsern vollständig unterstützt. Es ist seit 2015 in allen relevanten Browsern stabil und kann bedenkenlos eingesetzt werden.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

Flexbox hat in HTML-Emails sehr eingeschränkten Support. Nur Apple Mail und Thunderbird unterstützen es vollständig. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Apple Mail

Komplett
Gmail

Keine

Flexbox wird komplett ignoriert
Outlook

Keine

Kein Flexbox-Support, Tabellen-Layouts verwenden
Thunderbird

Komplett
Yahoo Mail

Keine

Kein Flexbox-Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da