HTML & CSS

Flexbox: Moderne Layouts mit CSS

Flexbox macht das Anordnen von Elementen entlang einer Achse zum Kinderspiel. Du lernst die wichtigsten Eigenschaften und baust flexible, responsive Layouts.

Anton

— 2 Min. Lesezeit
Teilen
Flexbox: Moderne Layouts mit CSS

Bevor es Flexbox gab, war das Zentrieren von Elementen oder das gleichmäßige Verteilen von Inhalten in CSS oft eine Qual. Mit Flexbox wurde das deutlich einfacher. Es ist ein eindimensionales Layout-System, mit dem du Elemente entlang einer Achse anordnest, ausrichtest und verteilst. In diesem Beitrag lernst du die wichtigsten Eigenschaften kennen und siehst, wie schnell sich damit saubere Layouts bauen lassen.

Der Flex-Container

Alles beginnt mit einem Container. Sobald du einem Element display: flex gibst, werden seine direkten Kinder zu Flex-Elementen und ordnen sich standardmäßig nebeneinander an:

.container {
  display: flex;
  gap: 16px; /* Abstand zwischen den Elementen */
}
<div class="container">
  <div class="box">Eins</div>
  <div class="box">Zwei</div>
  <div class="box">Drei</div>
</div>

Die drei Boxen stehen nun in einer Reihe. Das gap sorgt für gleichmäßige Abstände, ganz ohne Margin-Tricks.

Die Hauptachse mit justify-content

Mit justify-content steuerst du, wie die Elemente entlang der Hauptachse verteilt werden. Das ist standardmäßig die horizontale Achse:

/* Alles an den Anfang (Standard) */
.start { justify-content: flex-start; }

/* Zentriert */
.zentriert { justify-content: center; }

/* Gleichmäßiger Abstand zwischen den Elementen */
.verteilt { justify-content: space-between; }

/* Gleicher Abstand auch an den Rändern */
.umgeben { justify-content: space-around; }

Besonders space-between ist praktisch für Navigationsleisten, bei denen Logo und Menü an die äußeren Ränder sollen.

Die Querachse mit align-items

Während justify-content die Hauptachse steuert, kümmert sich align-items um die Querachse. Damit zentrierst du Elemente vertikal, was früher kompliziert war:

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

/* Vollständig zentriert, horizontal und vertikal */
.mittig {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Die Kombination aus justify-content: center und align-items: center ist die einfachste Methode, etwas perfekt in der Mitte zu platzieren.

Richtung und Umbruch

Standardmäßig verlaufen Flex-Elemente in einer Reihe. Mit flex-direction änderst du die Richtung, mit flex-wrap erlaubst du Umbrüche, wenn der Platz knapp wird:

/* Elemente untereinander */
.spalte {
  display: flex;
  flex-direction: column;
}

/* Umbruch in mehrere Zeilen erlauben */
.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

Mit flex-wrap: wrap baust du im Handumdrehen responsive Galerien, die sich an die Bildschirmbreite anpassen.

Flexible Größen mit flex

Die wahre Stärke von Flexbox liegt darin, dass Elemente wachsen und schrumpfen können. Die Kurzschreibweise flex steuert dieses Verhalten:

.sidebar {
  flex: 0 0 250px; /* nicht wachsen, nicht schrumpfen, 250px breit */
}

.inhalt {
  flex: 1; /* nimmt den restlichen Platz ein */
}
<div class="container">
  <aside class="sidebar">Seitenleiste</aside>
  <main class="inhalt">Hauptinhalt</main>
</div>

So entsteht ein klassisches Layout mit fester Seitenleiste und einem flexiblen Hauptbereich, der den restlichen Raum füllt.

Fazit

Flexbox ist ein unverzichtbares Werkzeug für moderne Layouts. Mit display: flex startest du, mit justify-content und align-items richtest du Elemente präzise aus, und mit flex lässt du sie flexibel wachsen oder schrumpfen. Für eindimensionale Anordnungen, also Reihen oder Spalten, ist Flexbox die erste Wahl. Sobald du zweidimensionale Raster brauchst, wirf einen Blick auf CSS Grid. Übe Flexbox an Navigationsleisten und Kartenlayouts, dann sitzt es schnell.

Weiterlesen