Fortgeschritten352025-01-15

CSS Flexbox - Der komplette Guide

Meistere CSS Flexbox von Grund auf. Alle Properties, praktische Beispiele und moderne Layouts. Von justify-content bis align-items - alles erklärt!

#css#flexbox#layout#responsive#flex

CSS Flexbox - Der komplette Guide

Flexbox ist die moderne Methode, um flexible Layouts zu erstellen. Schluss mit Float-Hacks und komplizierten Workarounds!

Was ist Flexbox?

Flexbox (Flexible Box Layout) ist ein eindimensionales Layout-System - perfekt für Zeilen oder Spalten.

Flexbox aktivieren
/* Container zum Flex-Container machen */
.container {
  display: flex;
}

/* HTML */
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* Ergebnis: Items werden automatisch nebeneinander angeordnet! */

Die zwei Achsen

Flexbox arbeitet mit zwei Achsen:

Main Axis (Hauptachse)
→ → → → → → → → → →

Cross Axis (Querachse)
↓
↓
↓
Main Axis vs Cross Axis
/* Horizontal (Standard) */
.container {
  display: flex;
  flex-direction: row; /* Main Axis: horizontal → */
}

/* Vertikal */
.container {
  display: flex;
  flex-direction: column; /* Main Axis: vertikal ↓ */
}

Container Properties

flex-direction - Richtung festlegen

flex-direction
/* row (Standard) - horizontal, links nach rechts */
.container {
  display: flex;
  flex-direction: row;
}

/* row-reverse - horizontal, rechts nach links */
.container {
  display: flex;
  flex-direction: row-reverse;
}

/* column - vertikal, oben nach unten */
.container {
  display: flex;
  flex-direction: column;
}

/* column-reverse - vertikal, unten nach oben */
.container {
  display: flex;
  flex-direction: column-reverse;
}

justify-content - Main Axis Ausrichtung

justify-content richtet Items auf der Main Axis aus.

justify-content - Alle Optionen
/* flex-start (Standard) - am Anfang */
.container {
  display: flex;
  justify-content: flex-start;
}
/* [1][2][3]                    */

/* flex-end - am Ende */
.container {
  display: flex;
  justify-content: flex-end;
}
/*                    [1][2][3] */

/* center - zentriert */
.container {
  display: flex;
  justify-content: center;
}
/*          [1][2][3]           */

/* space-between - Abstand zwischen Items */
.container {
  display: flex;
  justify-content: space-between;
}
/* [1]        [2]        [3]    */

/* space-around - Abstand um Items herum */
.container {
  display: flex;
  justify-content: space-around;
}
/*   [1]     [2]     [3]        */

/* space-evenly - gleichmäßiger Abstand */
.container {
  display: flex;
  justify-content: space-evenly;
}
/*    [1]    [2]    [3]         */

align-items - Cross Axis Ausrichtung

align-items richtet Items auf der Cross Axis aus.

align-items - Alle Optionen
/* stretch (Standard) - volle Höhe */
.container {
  display: flex;
  align-items: stretch;
}

/* flex-start - oben */
.container {
  display: flex;
  align-items: flex-start;
}

/* flex-end - unten */
.container {
  display: flex;
  align-items: flex-end;
}

/* center - vertikal zentriert */
.container {
  display: flex;
  align-items: center;
}

/* baseline - an Textbaseline ausgerichtet */
.container {
  display: flex;
  align-items: baseline;
}

Perfekt zentrieren

Horizontal + Vertikal zentrieren
.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
  height: 100vh;
}

/* Das war's! Perfekt zentriert! ✅ */

flex-wrap - Umbruch erlauben

flex-wrap
/* nowrap (Standard) - kein Umbruch */
.container {
  display: flex;
  flex-wrap: nowrap;
}
/* Items werden zusammengequetscht */

/* wrap - Umbruch erlauben */
.container {
  display: flex;
  flex-wrap: wrap;
}
/* Items brechen in neue Zeile um */

/* wrap-reverse - Umbruch, aber umgekehrt */
.container {
  display: flex;
  flex-wrap: wrap-reverse;
}
/* Neue Zeilen erscheinen oben */

gap - Abstand zwischen Items

gap - Der moderne Weg
/* Einheitlicher Abstand */
.container {
  display: flex;
  gap: 20px;
}

/* Unterschiedliche Abstände (row / column) */
.container {
  display: flex;
  gap: 20px 40px; /* vertikal / horizontal */
}

/* Oder einzeln */
.container {
  display: flex;
  row-gap: 20px;
  column-gap: 40px;
}

align-content - Mehrere Zeilen

align-content funktioniert nur mit flex-wrap: wrap und mehreren Zeilen.

align-content
.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: flex-start;    /* Zeilen oben */
  /* align-content: flex-end;      Zeilen unten */
  /* align-content: center;        Zeilen zentriert */
  /* align-content: space-between; Abstand zwischen Zeilen */
  /* align-content: space-around;  Abstand um Zeilen */
  /* align-content: stretch;       Zeilen strecken (Standard) */
}

Item Properties

flex-grow - Wachsen erlauben

flex-grow bestimmt, wie viel extra Platz ein Item bekommt.

flex-grow
/* Alle Items gleich */
.item {
  flex-grow: 1;
}
/* Jedes Item bekommt gleich viel Platz */

/* Unterschiedliche Werte */
.item-1 { flex-grow: 1; } /* 1 Teil */
.item-2 { flex-grow: 2; } /* 2 Teile (doppelt so groß) */
.item-3 { flex-grow: 1; } /* 1 Teil */

/* 0 = wächst nicht (Standard) */
.item {
  flex-grow: 0;
}

flex-shrink - Schrumpfen erlauben

flex-shrink bestimmt, wie stark ein Item schrumpfen kann.

flex-shrink
/* Standard = 1 (schrumpft) */
.item {
  flex-shrink: 1;
}

/* Nicht schrumpfen */
.item {
  flex-shrink: 0;
}

/* Stärker schrumpfen */
.item {
  flex-shrink: 2;
}

flex-basis - Basis-Größe

flex-basis definiert die Anfangsgröße (vor grow/shrink).

flex-basis
/* Feste Breite */
.item {
  flex-basis: 200px;
}

/* Prozentual */
.item {
  flex-basis: 33.333%; /* 1/3 der Container-Breite */
}

/* Auto (Standard) - basierend auf content */
.item {
  flex-basis: auto;
}

flex - Shorthand Property

flex ist die Kurzform für grow, shrink und basis.

flex Shorthand
/* Syntax: flex: grow shrink basis */

/* Häufigste Patterns: */

/* flex: 1 - Item nimmt verfügbaren Platz */
.item {
  flex: 1;
  /* = flex: 1 1 0% */
}

/* flex: auto - responsive, basierend auf Content */
.item {
  flex: auto;
  /* = flex: 1 1 auto */
}

/* flex: none - feste Größe */
.item {
  flex: none;
  /* = flex: 0 0 auto */
}

/* Custom */
.item {
  flex: 2 1 200px; /* grow: 2, shrink: 1, basis: 200px */
}

align-self - Individuelle Ausrichtung

align-self überschreibt align-items für ein einzelnes Item.

align-self
.container {
  display: flex;
  align-items: flex-start; /* Alle oben */
}

/* Ausnahme: Item 2 zentriert */
.item-2 {
  align-self: center;
}

/* Mögliche Werte: */
.item {
  align-self: auto;        /* Erbt von align-items */
  align-self: flex-start;  /* Oben */
  align-self: flex-end;    /* Unten */
  align-self: center;      /* Zentriert */
  align-self: stretch;     /* Volle Höhe */
  align-self: baseline;    /* Baseline */
}

order - Reihenfolge ändern

order ändert die visuelle Reihenfolge (nicht im HTML!).

order
/* Standard: alle order: 0 */

/* Item 3 zuerst anzeigen */
.item-3 {
  order: -1; /* Kommt vor order: 0 */
}

/* Item 1 als letztes */
.item-1 {
  order: 1; /* Kommt nach order: 0 */
}

/* Beispiel */
<div class="item item-1">1</div> /* order: 1 */
<div class="item item-2">2</div> /* order: 0 */
<div class="item item-3">3</div> /* order: -1 */

/* Angezeigt als: 3 2 1 */

Praktische Beispiele

Beispiel 1: Navigation Bar

Responsive Navigation
/* HTML */
<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="cta">Sign Up</button>
</nav>

/* CSS */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.cta {
  padding: 0.5rem 1.5rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

Beispiel 2: Card Grid

Responsive Card Layout
/* HTML */
<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
</div>

/* CSS */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
}

.card {
  flex: 1 1 300px; /* Minimum 300px, wächst wenn Platz */
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Automatisch responsive:
   - Große Screens: 3+ Karten pro Zeile
   - Mittel: 2 Karten pro Zeile
   - Klein: 1 Karte pro Zeile
*/

Beispiel 3: Holy Grail Layout

Header, Sidebar, Content, Footer
/* HTML */
<div class="page">
  <header class="header">Header</header>
  <div class="content-wrapper">
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
  </div>
  <footer class="footer">Footer</footer>
</div>

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

.header,
.footer {
  padding: 2rem;
  background: #333;
  color: white;
}

.content-wrapper {
  display: flex;
  flex: 1; /* Nimmt verfügbaren Platz */
}

.sidebar {
  flex: 0 0 250px; /* Feste Breite */
  background: #f5f5f5;
  padding: 2rem;
}

.main {
  flex: 1; /* Nimmt Rest */
  padding: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .sidebar {
    flex: 0 0 auto; /* Auto height */
  }
}

Beispiel 4: Centered Modal

Perfekt zentriertes Modal
/* HTML */
<div class="modal-overlay">
  <div class="modal">
    <h2>Modal Title</h2>
    <p>Modal content goes here...</p>
    <button>Close</button>
  </div>
</div>

/* CSS */
.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}

/* Perfekt zentriert, vertikal + horizontal! */

Beispiel 5: Feature Grid

3-Spalten Feature Layout
/* HTML */
<div class="features">
  <div class="feature">
    <div class="feature-icon">🚀</div>
    <h3>Fast</h3>
    <p>Lightning fast performance</p>
  </div>
  <div class="feature">
    <div class="feature-icon">🔒</div>
    <h3>Secure</h3>
    <p>Bank-level security</p>
  </div>
  <div class="feature">
    <div class="feature-icon">📱</div>
    <h3>Responsive</h3>
    <p>Works on all devices</p>
  </div>
</div>

/* CSS */
.features {
  display: flex;
  gap: 3rem;
  padding: 4rem 2rem;
}

.feature {
  flex: 1;
  text-align: center;
  padding: 2rem;
}

.feature-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .features {
    flex-direction: column;
  }
}

Beispiel 6: Space Between Pattern

Label - Value Pairs
/* HTML */
<div class="info-row">
  <span class="label">Name:</span>
  <span class="value">Anna Schmidt</span>
</div>
<div class="info-row">
  <span class="label">Email:</span>
  <span class="value">anna@example.com</span>
</div>

/* CSS */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}

.label {
  font-weight: bold;
}

.value {
  color: #666;
}

📝 Quiz

Was macht justify-content: space-between?

⚡

Tipps & Tricks

Auto Margins - Der Trick

/* Auto margin in Flexbox ist mächtig! */
.container {
  display: flex;
}

.item:last-child {
  margin-left: auto; /* Schiebt Item nach rechts */
}

/* Beispiel: Logo links, Button rechts */
.navbar {
  display: flex;
}

.cta {
  margin-left: auto; /* Schiebt Button ganz rechts */
}

Minimum Content Width

/* Items schrumpfen nie unter Content-Breite */
.item {
  flex: 1 1 0%;
  min-width: 0; /* Erlaubt Schrumpfen unter Content! */
}

Sticky Footer

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

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

/* Footer bleibt immer unten! */

Equal Height Cards

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

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

.card-content {
  flex: 1; /* Füllt Platz */
}

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

Häufige Fehler

Fehler 1: flex-direction vergessen

❌ FALSCH:

.container {
  display: flex;
  align-items: center; /* Wirkt vertikal */
  justify-content: center; /* Wirkt horizontal */
}
/* Bei column: andersherum! */

✅ RICHTIG:

/* Immer bewusst: Main Axis vs Cross Axis */
.container {
  display: flex;
  flex-direction: row; /* Main = horizontal */
  justify-content: center; /* Main Axis */
  align-items: center; /* Cross Axis */
}

Fehler 2: Height bei align-items vergessen

❌ FALSCH:

.container {
  display: flex;
  align-items: center; /* Wirkt nicht ohne Height! */
}

✅ RICHTIG:

.container {
  display: flex;
  align-items: center;
  min-height: 200px; /* Oder height: 100vh */
}

Fehler 3: flex: 1 bei fester Breite

❌ FALSCH:

.item {
  flex: 1;
  width: 300px; /* Wird ignoriert! */
}

✅ RICHTIG:

.item {
  flex: 0 0 300px; /* Feste Breite */
  /* Oder */
  flex: 1 1 300px; /* Minimum 300px, kann wachsen */
}

Fehler 4: gap nicht supported

❌ PROBLEM:

.container {
  display: flex;
  gap: 20px; /* Alte Browser unterstützen das nicht */
}

✅ FALLBACK:

.container {
  display: flex;
  margin: -10px; /* Negatives margin als Fallback */
}

.item {
  margin: 10px;
}

/* Oder mit :not(:last-child) */
.item:not(:last-child) {
  margin-right: 20px;
}
🎯

Zusammenfassung

Du hast gelernt:

  • ✅ Flexbox aktivieren mit display: flex
  • ✅ Main Axis vs Cross Axis verstehen
  • ✅ justify-content - Main Axis Ausrichtung
  • ✅ align-items - Cross Axis Ausrichtung
  • ✅ flex-direction - Richtung ändern
  • ✅ flex-wrap - Umbruch erlauben
  • ✅ gap - Moderne Abstände
  • ✅ flex: grow shrink basis - Item Größen
  • ✅ order - Reihenfolge ändern
  • ✅ Praktische Layouts (Navigation, Cards, Holy Grail)

Key Takeaways:

  • Flexbox = eindimensional (Zeile ODER Spalte)
  • Main Axis = durch flex-direction bestimmt
  • justify-content = Main Axis
  • align-items = Cross Axis
  • flex: 1 = Item nimmt verfügbaren Platz
  • gap = modernste Methode für Abstände
  • Auto margins = mächtiger Trick

Best Practices:

  • flex: 1 für gleich große Items
  • flex-wrap: wrap für responsive Layouts
  • gap statt margin für Abstände
  • min-height bei vertical centering
  • Mobile-first mit flex-direction: column

Praktische Übungen

Übung 1: Navbar

Erstelle eine Navigation mit:

  • Logo links
  • Links in der Mitte
  • Button rechts
  • Responsive (vertikal auf Mobile)

Übung 2: Card Grid

Erstelle ein Card-Grid:

  • 3 Spalten auf Desktop
  • 2 Spalten auf Tablet
  • 1 Spalte auf Mobile
  • Gleiche Höhe für alle Cards

Übung 3: Pricing Table

Baue eine Pricing Table:

  • 3 Spalten nebeneinander
  • Button immer unten
  • Highlight mittlere Box
  • Responsive

Übung 4: Dashboard Layout

Erstelle:

  • Header oben (feste Höhe)
  • Sidebar links (feste Breite)
  • Main content (nimmt Rest)
  • Footer unten (sticky)

Übung 5: Image Gallery

Baue eine Gallery:

  • Flexible Anzahl Bilder pro Zeile
  • Automatischer Umbruch
  • Gap zwischen Bildern
  • Responsive
← CSS•Lektion 15 von 16
94% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "CSS Flexbox - Der komplette Guide" abgeschlossen

Vorherige Lektion
CSS Pseudo-Elements - ::before, ::after & mehr
Nächste Lektion
CSS Grid - Der komplette Guide
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

CSS Grid - Der komplette Guide

Meistere CSS Grid von Grund auf. Erstelle komplexe 2D-Layouts mit Grid Template, Areas, Auto-Placement und mehr. Mit praktischen Beispielen!

Fortgeschrittencss

CSS Display & Position - Layout-Grundlagen

Lerne die CSS-Properties display (block, inline, inline-block) und position (static, relative, absolute, fixed, sticky) für modernes Layout.

Anfängercss

CSS Media Queries - Responsive Design

Lerne Media Queries für responsive Webseiten: Breakpoints, mobile-first, min-width/max-width, und responsive Patterns für alle Geräte.

Anfängercss
Zurück zu CSS