Flexbox meistern

Flexbox ist die wichtigste Layout-Methode in CSS fuer eindimensionale Anordnungen. Ob Navigation, Kartenreihen, Formulare oder Footer — Flexbox macht es einfach. In diesem Kapitel lernst du alles, was du fuer den Alltag brauchst.

Was ist Flexbox?

Flexbox (Flexible Box Layout) ordnet Elemente in einer Richtung an — horizontal oder vertikal. Es ersetzt komplizierte Float-Hacks und macht Layouts intuitiv.

.container {
    display: flex;
}

Das war’s! Damit werden alle direkten Kinder zu Flex-Items und ordnen sich nebeneinander an.

Flex-Container vs. Flex-Items

<div class="container">   <!-- Flex-Container -->
    <div class="item">1</div>   <!-- Flex-Item -->
    <div class="item">2</div>   <!-- Flex-Item -->
    <div class="item">3</div>   <!-- Flex-Item -->
</div>

Wichtig: Flexbox-Eigenschaften teilen sich in zwei Gruppen:

• Container-Eigenschaften: Steuern das Layout aller Items
• Item-Eigenschaften: Steuern ein einzelnes Item

Container-Eigenschaften

flex-direction: Die Hauptachse

.container { display: flex; }

/* Horizontal (Standard) */
.row { flex-direction: row; }           /* → Links nach Rechts */
.row-reverse { flex-direction: row-reverse; }  /* ← Rechts nach Links */

/* Vertikal */
.column { flex-direction: column; }         /* ↓ Oben nach Unten */
.column-reverse { flex-direction: column-reverse; } /* ↑ Unten nach Oben */

flex-wrap: Umbruch erlauben

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

/* Umbruch in naechste Zeile */
.wrap { flex-wrap: wrap; }

/* Umbruch in umgekehrter Reihenfolge */
.wrap-reverse { flex-wrap: wrap-reverse; }

justify-content: Ausrichtung auf der Hauptachse

.container {
    display: flex;
    justify-content: flex-start;      /* |■ ■ ■      | (Standard) */
    justify-content: flex-end;        /* |      ■ ■ ■| */
    justify-content: center;          /* |   ■ ■ ■   | */
    justify-content: space-between;   /* |■    ■    ■| */
    justify-content: space-around;    /* | ■   ■   ■ | */
    justify-content: space-evenly;    /* |  ■  ■  ■  | */
}

align-items: Ausrichtung auf der Querachse

.container {
    display: flex;
    height: 300px;
    align-items: stretch;      /* Items fuellen die volle Hoehe (Standard) */
    align-items: flex-start;   /* Am Anfang (oben) */
    align-items: flex-end;     /* Am Ende (unten) */
    align-items: center;       /* Zentriert */
    align-items: baseline;     /* An der Textlinie ausgerichtet */
}

align-content: Mehrzeilige Ausrichtung

Funktioniert nur mit flex-wrap: wrap und mehreren Zeilen:

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: center;
    align-content: space-between;
    align-content: stretch; /* Standard */
}

gap: Abstaende zwischen Items

.container {
    display: flex;
    gap: 1rem;              /* Gleicher Abstand ueberall */
    gap: 1rem 2rem;         /* Zeilen-Abstand  Spalten-Abstand */
    row-gap: 1rem;          /* Nur Zeilen-Abstand */
    column-gap: 2rem;       /* Nur Spalten-Abstand */
}

gap ist moderner und sauberer als Margin-Hacks!

Item-Eigenschaften

flex-grow: Wachstum

/* Alle Items gleich breit */
.item { flex-grow: 1; }

/* Ein Item doppelt so breit */
.item-large { flex-grow: 2; }

/* Standard: Nicht wachsen */
.item-static { flex-grow: 0; }

flex-shrink: Schrumpfung

/* Standard: Items schrumpfen bei Platzmangel */
.item { flex-shrink: 1; }

/* Item darf NICHT schrumpfen */
.item-fixed { flex-shrink: 0; }

flex-basis: Ausganggroesse

.item {
    flex-basis: 200px;  /* Startbreite (statt width bei Flex) */
    flex-basis: 30%;    /* Prozentual */
    flex-basis: auto;   /* Basiert auf Inhalt/width (Standard) */
}

Die flex-Kurzschreibweise

/* flex: grow shrink basis */
.item { flex: 0 1 auto; }     /* Standard */
.item { flex: 1; }             /* = flex: 1 1 0% -- gleichmaessig verteilen */
.item { flex: 1 0 200px; }    /* Wachsen, nicht schrumpfen, Start: 200px */
.item { flex: none; }          /* = flex: 0 0 auto -- nicht flexibel */

align-self: Einzelnes Item ausrichten

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

/* Nur dieses Item anders ausrichten */
.special {
    align-self: center;
    /* oder: flex-end, stretch, baseline */
}

order: Reihenfolge aendern

.item-1 { order: 3; }  /* Wird als drittes angezeigt */
.item-2 { order: 1; }  /* Wird als erstes angezeigt */
.item-3 { order: 2; }  /* Wird als zweites angezeigt */

Praktische Layouts

1. Horizontale Navigation

<nav class="navbar">
    <a href="/" class="logo">Logo</a>
    <ul class="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="/about">Ueber uns</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
    </ul>
</nav>

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

.logo {
    color: #e44d26;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
}

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

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

2. Card-Grid mit Flex-Wrap

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

.card {
    flex: 1 1 300px;  /* Wachsen, schrumpfen, mindestens 300px */
    max-width: 400px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

3. Footer mit Spalten

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 3rem 2rem;
    background: #1a1a2e;
    color: white;
}

.footer-column {
    flex: 1 1 200px;
}

4. Vertikales Zentrieren

/* Vollbild-Zentrierung */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* In einem Container */
.centered-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

5. Sticky Footer (Footer immer unten)

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

main {
    flex: 1; /* Main waechst und drueckt Footer nach unten */
}

footer {
    /* Footer bleibt immer am unteren Rand */
}

Haeufige Flexbox-Muster

Space-between mit erstem Element links

.toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toolbar .spacer {
    flex: 1; /* Nimmt allen verfuegbaren Platz */
}

<div class="toolbar">
    <span>Logo</span>
    <div class="spacer"></div>
    <button>Login</button>
    <button>Registrieren</button>
</div>

Gleichmaessige Breite fuer alle Items

.equal-items {
    display: flex;
    gap: 1rem;
}

.equal-items > * {
    flex: 1;
}

Uebungen

Uebung 1: Navigation

Erstelle eine responsive Navigation mit:

• Logo links
• Navigationlinks rechts
• Vertikal zentriert

Uebung 2: Card-Layout

Erstelle ein Kartenraster mit mindestens 6 Karten, das sich automatisch umbricht. Jede Karte soll mindestens 280px breit sein.

Uebung 3: Holy Grail Layout

Erstelle das “Holy Grail Layout”: Header, Footer, Hauptinhalt mit Sidebar links und rechts. Nutze Flexbox fuer alles.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du CSS Grid — die perfekte Ergaenzung zu Flexbox:

• Zweidimensionale Layouts (Zeilen UND Spalten)
• Grid-Template-Areas
• Auto-Fit und Auto-Fill

Zusammenfassung

• display: flex macht den Container zum Flex-Container
• justify-content richtet Items auf der Hauptachse aus
• align-items richtet Items auf der Querachse aus
• flex-wrap: wrap erlaubt den Umbruch in mehrere Zeilen
• gap definiert Abstaende ohne Margin-Hacks
• flex: 1 verteilt den Platz gleichmaessig auf alle Items
• flex: 1 1 300px ist ein gaengiges Muster fuer responsive Cards

---