Flexbox Praxis-Layouts

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>

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>

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>

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>

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>

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.

• 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.

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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.

• 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