Flexbox Praxis-Layouts

Zuletzt aktualisiert am 15. Februar 2026

Flexbox-Theorie ist das eine, echte Layouts bauen das andere. In diesem Artikel findest du die häufigsten Layout-Patterns, die du mit Flexbox lösen kannst: perfekte Zentrierung, responsive Navigationen, Card-Layouts mit gleicher Höhe, das klassische Holy-Grail-Layout und einen Sticky Footer. Jedes Beispiel kannst du direkt kopieren und in deinem Projekt anpassen.

Perfekte Zentrierung

Die einfachste und eleganteste Art, ein Element vertikal und horizontal zu zentrieren. Zwei Zeilen CSS reichen.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160px;
}

<div class="center-container">
<div class="center-box">Perfekt zentriert</div>
</div>

Eine Alternative, die ebenfalls funktioniert: margin: auto auf dem Flex-Item.

.container {
  display: flex;
  height: 160px;
}

.item {
  margin: auto;
}

<div class="center-container">
<div class="center-box">margin: auto</div>
</div>

Responsive Navigation

Eine Navigation mit Logo links und Links rechts ist eines der häufigsten Patterns im Web. space-between macht es trivial.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}

.nav-links {
  display: flex;
  gap: 16px;
  list-style: none;
}

<nav class="navbar">
<div class="logo">MeinLogo</div>
<ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Docs</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>
</nav>

Card-Layout mit gleicher Höhe

Cards sollen immer gleich hoch sein, unabhängig vom Inhalt. Der Trick: flex: 1 1 300px für responsive Spalten und margin-top: auto auf dem Button, um ihn nach unten zu drücken.

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
}

/* Button immer unten */
.card-btn {
  margin-top: auto;
}

<div class="card-grid">
<div class="card">
  <h3>Kurzer Titel</h3>
  <p>Wenig Text.</p>
  <a href="#" class="card-btn">Mehr lesen</a>
</div>
<div class="card">
  <h3>Mittlerer Titel</h3>
  <p>Dieser Text ist etwas länger, damit du siehst, wie sich die Karten anpassen und der Button trotzdem unten bleibt.</p>
  <a href="#" class="card-btn">Mehr lesen</a>
</div>
<div class="card">
  <h3>Langer Titel</h3>
  <p>Kurz.</p>
  <a href="#" class="card-btn">Mehr lesen</a>
</div>
</div>

Holy Grail Layout

Das klassische Layout mit Header, Footer, Sidebar links, Sidebar rechts und einem Main-Bereich in der Mitte. Mit Flexbox brauchst du nur verschachtelte Flex-Container.

.holy-grail {
  display: flex;
  flex-direction: column;
  height: 260px;
}

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

.sidebar       { width: 90px; }
.main          { flex: 1; }
.sidebar-right { width: 80px; }

<div class="holy-grail">
<header class="hg-header">Header</header>
<div class="hg-body">
  <aside class="hg-sidebar">Sidebar Links</aside>
  <main class="hg-main">Main Content: Hier kommt der Hauptinhalt rein. Der Bereich wächst mit flex: 1 und füllt den gesamten verfügbaren Platz.</main>
  <aside class="hg-sidebar-right">Sidebar Rechts</aside>
</div>
<footer class="hg-footer">Footer</footer>
</div>

Sticky Footer

Der Footer klebt am unteren Rand der Seite, auch wenn der Inhalt kurz ist. Das Geheimnis: flex-direction: column auf dem äußeren Container, min-height: 100vh und flex: 1 auf dem Main-Bereich.

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

.main {
  flex: 1; /* Füllt den Rest */
}

/* Header und Footer brauchen kein flex */

<div class="page">
<header class="page-header">Header</header>
<main class="page-main">Wenig Inhalt, trotzdem klebt der Footer unten.</main>
<footer class="page-footer">Footer: bleibt immer unten</footer>
</div>

Barrierefreiheit

Responsive Flexbox-Layouts müssen auf allen Breakpoints eine logische Lesereihenfolge behalten. Das betrifft besonders Layouts, die von flex-direction: row auf column wechseln (oder umgekehrt).

Test-Checklist:

• Navigiere mit der Tab-Taste durch dein Layout, auf Mobile UND Desktop. Die Tab-Reihenfolge muss in beiden Ansichten Sinn ergeben.
• Wenn Items bei kleineren Viewports umbrechen oder die Richtung wechseln, überprüfe, ob die semantische Reihenfolge (= DOM-Reihenfolge) noch zur visuellen Darstellung passt.
• Bei Layouts wie dem Holy-Grail-Pattern: Die HTML-Struktur sollte Header → Sidebar → Main → Footer sein (oder Main vor Sidebar, je nach Priorität), auch wenn visuell die Sidebar links vom Main-Bereich erscheint.

WCAG 1.3.2 (Meaningful Sequence): Die DOM-Reihenfolge muss die logische Lesereihenfolge widerspiegeln. Wenn die visuelle Anordnung bei unterschiedlichen Viewport-Breiten stark variiert, teste mit Screenreadern (z.B. NVDA, VoiceOver) und Tastaturnavigation.

Tipps für die Praxis

• Starte mit flex: 1: In den meisten Fällen willst du, dass Items den verfügbaren Platz gleichmäßig aufteilen. flex: 1 ist dein Standardwerkzeug dafür.
• margin-top: auto ist mächtig: In einem flex-direction: column Container schiebt margin-top: auto ein Element nach unten. Das ist perfekt für Buttons in Cards oder Footers in Containern.
• Verschachtelte Flex-Container sind normal: Für komplexe Layouts brauchst du oft Flex-Container in Flex-Containern. Das ist kein Anti-Pattern, sondern genau dafür gemacht.
• gap statt margin: Verwende gap für Abstände zwischen Items. Es ist sauberer, weil kein Abstand am Rand entsteht und du keinen :last-child Hack brauchst.
• Flexbox vs. Grid: Flexbox ist ideal für eindimensionale Layouts (eine Reihe oder eine Spalte). Für zweidimensionale Raster (Zeilen und Spalten gleichzeitig) ist CSS Grid die bessere Wahl.
• Mobile First: Starte mit flex-direction: column für Mobile und wechsle mit einer Media Query zu row für Desktop. Das ist einfacher als umgekehrt.
• Teste mit unterschiedlichem Inhalt: Flex-Layouts können überraschen, wenn ein Item plötzlich mehr Text hat als erwartet. Teste immer mit kurzen und langen Inhalten.

Browser-Kompatibilität

Alle in diesem Artikel verwendeten Flexbox-Eigenschaften werden von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

Flexbox-Layouts funktionieren in HTML-Emails nur in Apple Mail und Thunderbird. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Verwandte Eigenschaften