Ausrichtung und Layout mit CSS Flexbox

CSS Flexbox ist ein leistungsstarkes CSS-Layout-Modul, das dafür entworfen wurde, Elemente entlang einer einzigen Dimension — einer Zeile oder einer Spalte — mühelos auszurichten und zu verteilen. Anders als die alten float- und inline-block-Tricks ordnet Flexbox Elemente entlang einer Achse an, verteilt den übrigen Platz sinnvoll und löst das vertikale Zentrieren in einer einzigen Zeile. In diesem Tutorial lernst du die zentralen Flexbox-Eigenschaften mit korrekter Syntax, echten Beispielen und den Layout-Mustern, die du täglich brauchst.

Der Flex-Container und das Achsenkonzept

Alles beginnt damit, einem Element display: flex zu geben. Dieses Element wird zum Flex-Container und seine direkten Kinder werden zu Flex-Elementen. Um Flexbox wirklich zu verstehen, musst du seine zwei Achsen begreifen:

Hauptachse: wird durch flex-direction festgelegt. Beim Standardwert row verläuft sie von links nach rechts.
Querachse: steht senkrecht zur Hauptachse. In einem row-Layout verläuft sie von oben nach unten.

Diese Unterscheidung ist entscheidend: justify-content wirkt immer entlang der Hauptachse, während align-items immer entlang der Querachse wirkt. Wenn du flex-direction änderst, vertauscht sich auch die Richtung beider Eigenschaften.

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

Verteilen auf der Hauptachse: justify-content

justify-content verteilt Elemente entlang der Hauptachse und steuert den Abstand zwischen ihnen. Die gängigsten Werte sind:

flex-start — packt Elemente an den Anfang (Standard).
center — zentriert die Elemente.
flex-end — packt Elemente an das Ende.
space-between — erstes und letztes Element kleben an den Rändern, der übrige Platz wird gleichmäßig dazwischen verteilt.
space-around — gleicher Abstand auf beiden Seiten jedes Elements.
space-evenly — alle Abstände (auch die Ränder) sind gleich groß.

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

Ausrichten auf der Querachse: align-items und align-self

align-items richtet jedes Element entlang der Querachse aus. stretch (der Standard) dehnt Elemente auf die Höhe des Containers, während center sie vertikal zentriert — die sauberste Lösung für das Problem des "vertikalen Zentrierens", das Entwickler jahrelang plagte.

stretch — dehnt Elemente über die Querachse (Standard).
flex-start / flex-end — richtet am Anfang oder Ende aus.
center — zentriert auf der Querachse.
baseline — richtet die Grundlinien des Textes aus.

Um ein einzelnes Element anders als die übrigen auszurichten, wende align-self auf dieses Element an; es überschreibt align-items nur für dieses eine Element.

.karte {
  align-self: flex-end; /* nur dieses Element richtet sich am Ende aus */
}

Umbruch und Abstand: flex-wrap und gap

Standardmäßig bleiben Flex-Elemente in einer einzigen Zeile und schrumpfen, wenn sie nicht passen. Mit flex-wrap: wrap dürfen Elemente in eine neue Zeile umbrechen — die Grundlage responsiver Karten-Raster. Um Abstand zwischen Elemente zu bringen, brauchst du keine margin-Tricks mehr; die moderne Lösung ist die gap-Eigenschaft.

.karten-raster {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Abstand zwischen Zeilen und Spalten */
}

gap fügt Abstand nur zwischen den Elementen ein, niemals an den Außenrändern, was es weitaus berechenbarer macht als die alten margin-basierten Ansätze.

Flexibilität: flex-grow, flex-shrink, flex-basis und die flex-Kurzform

Die wahre Stärke von Flexbox zeigt sich darin, wie es den übrigen Platz auf die Elemente verteilt. Drei Eigenschaften steuern dies:

flex-grow — wie stark ein Element wächst, um den übrigen Platz zu füllen (Standard 0).
flex-shrink — wie stark ein Element schrumpft, wenn der Platz knapp wird (Standard 1).
flex-basis — die Ausgangsgröße vor dem Wachsen oder Schrumpfen (Standard auto).

Um alle drei in einer Zeile zu schreiben, nutzt du die flex-Kurzform. Die häufigsten Muster sind:

.element {
  flex: 1; /* flex: 1 1 0 — alle Elemente teilen sich gleiche Breite */
}

.feste-seitenleiste {
  flex: 0 0 240px; /* wächst noch schrumpft nicht: eine feste 240px-Spalte */
}

.flexibler-inhalt {
  flex: 1 1 300px; /* startet bei 300px, wächst bei Platz, schrumpft bei Bedarf */
}

Wenn jedem Kind flex: 1 gegeben wird, teilen sie sich alle den übrigen Platz zu gleichen Teilen — der kürzeste Weg zu gleich breiten Spalten.

Reihenfolge: order

Die order-Eigenschaft erlaubt es dir, Elemente visuell umzuordnen, ohne ihre Reihenfolge im HTML zu ändern. Der Standardwert ist 0; niedrigere Werte rücken nach vorne, höhere nach hinten.

.hervorgehoben {
  order: -1; /* springt ganz nach vorne, egal wo es im HTML steht */
}

Hinweis zur Barrierefreiheit: order ändert nur das Visuelle — die Reihenfolge für Tastatur und Screenreader folgt weiterhin dem HTML-Quelltext. Übertreibe es daher nicht so, dass die logische Lesereihenfolge zerbricht.

Ein praktisches Muster: perfektes Zentrieren am Bildschirm

Ein Element sowohl horizontal als auch vertikal zu zentrieren ist mit Flexbox ein einziger Block:

.zentrum {
  display: flex;
  justify-content: center; /* Hauptachse: horizontal */
  align-items: center;     /* Querachse: vertikal */
  min-height: 100vh;
}

Für ein Karten-Raster lässt die Kombination aus flex-wrap und flex-basis die Spaltenzahl natürlich wachsen, je breiter der Bildschirm wird — ein responsives Raster, ohne auch nur eine Media Query zu schreiben.

Häufig gestellte Fragen

Sollte ich Flexbox oder Grid verwenden?

Die Faustregel: Nutze Flexbox für eindimensionale Layouts (eine einzelne Zeile oder Spalte, Navigationsleisten, Button-Gruppen, Kartenreihen) und CSS Grid für zweidimensionale Layouts (Zeilen und Spalten gemeinsam ausrichten, Seitenvorlagen). Sie sind keine Rivalen, sondern Ergänzungen; die meisten Seiten verschachteln sie miteinander.

Wie unterscheide ich justify-content und align-items?

justify-content wirkt immer entlang der Hauptachse (standardmäßig horizontal), während align-items immer entlang der Querachse wirkt (standardmäßig vertikal). Setze flex-direction: column und diese Richtungen vertauschen sich, weil die Hauptachse nun vertikal ist.

Wie füge ich Abstand zwischen Elemente ein?

In modernen Browsern ist die sauberste Methode die gap-Eigenschaft. Gib dem Container statt margin-Tricks gap: 1rem; das bringt nur die Elemente auseinander und hält die Außenränder sauber.

Willst du Layout-Probleme endgültig lösen? Lass uns gemeinsam eine schnelle, responsive Oberfläche bauen, die Flexbox und Grid richtig kombiniert. Nimm Kontakt mit mir auf und lass uns über dein Projekt sprechen.