HTML + CSS: Layout mit Flexbox

Kurz: Flexbox ordnet Elemente in einer Reihe oder Spalte an, verteilt den Platz und richtet sie aus. Es ist das Werkzeug für Menüs, Kartenreihen, Zentrierung und alles Eindimensionale.

Teil des Kurses HTML + CSS

Kapitel 19 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Flexbox ordnet Elemente in einer Reihe oder Spalte an, verteilt den Platz und richtet sie aus. Es ist das Werkzeug für Menüs, Kartenreihen, Zentrierung und alles Eindimensionale.

Du setzt display: flex auf den Container. Seine direkten Kinder werden zu Flex-Elementen.

<style>
  .reihe { display: flex; gap: 10px; background: #f1f5f9; padding: 10px; }
  .reihe > div { background: #6366f1; color: white; padding: 14px; border-radius: 6px; }
</style>
<div class="reihe"><div>Eins</div><div>Zwei</div><div>Drei</div></div>

Hauptachse und Querachse

Alles in Flexbox dreht sich um zwei Achsen:

• Hauptachse: Richtung von flex-direction (Standard: row, von links nach rechts)
• Querachse: senkrecht dazu

Eigenschaft (Container)	Werte	Wirkung
flex-direction	row, row-reverse, column, column-reverse	Richtung der Hauptachse
justify-content	flex-start, center, flex-end, space-between, space-around, space-evenly	Verteilung entlang der Hauptachse
align-items	stretch, flex-start, center, flex-end, baseline	Ausrichtung entlang der Querachse
flex-wrap	nowrap, wrap	Umbruch in mehrere Zeilen
gap	10px, 10px 20px	Abstand zwischen den Elementen
align-content	wie justify-content	Verteilung mehrerer Zeilen

<style>
  .c { display: flex; height: 80px; background: #f1f5f9; margin: 6px 0; gap: 6px; }
  .c > div { background: #0ea5e9; color: white; padding: 6px 12px; }
  .a { justify-content: flex-start; }
  .b { justify-content: center; }
  .d { justify-content: space-between; }
  .e { justify-content: space-evenly; align-items: center; }
  .f { justify-content: flex-end; align-items: flex-end; }
</style>
<div class="c a"><div>start</div><div>2</div></div>
<div class="c b"><div>center</div><div>2</div></div>
<div class="c d"><div>space-between</div><div>2</div><div>3</div></div>
<div class="c e"><div>space-evenly</div><div>2</div><div>3</div></div>
<div class="c f"><div>unten rechts</div><div>2</div></div>

Perfekt zentrieren

Eines der berühmtesten Probleme, in drei Zeilen gelöst:

<style>
  .mitte { display: flex; justify-content: center; align-items: center; height: 140px; background: #fef3c7; border: 2px solid #f59e0b; }
</style>
<div class="mitte"><strong>Mitten drin</strong></div>

Kürzer mit Grid: display: grid; place-items: center;.

Elemente flexibel machen

Die Eigenschaften der Kinder bestimmen, wie sie den Platz teilen:

Eigenschaft	Bedeutung
flex-grow	Wachstumsanteil bei freiem Platz (0 = nicht wachsen)
flex-shrink	Schrumpfanteil bei Platzmangel
flex-basis	Ausgangsgröße (auto, 200px, 30%)
flex	Kurzform grow shrink basis: flex: 1 = 1 1 0
align-self	eigene Querachsen-Ausrichtung
order	Reihenfolge (nur visuell; Tastaturreihenfolge bleibt!)

<style>
  .c { display: flex; gap: 6px; margin: 6px 0; }
  .c > div { background: #14b8a6; color: white; padding: 10px; }
  .gleich > div { flex: 1; }                    /* alle gleich breit */
  .doppelt > div:nth-child(2) { flex: 2; }      /* mittleres doppelt so breit */
  .fest > div:first-child { flex: 0 0 120px; }  /* feste Breite, Rest teilt sich den Platz */
  .fest > div:last-child { flex: 1; }
</style>
<div class="c gleich"><div>flex: 1</div><div>flex: 1</div><div>flex: 1</div></div>
<div class="c doppelt"><div>1</div><div>flex: 2</div><div>3</div></div>
<div class="c fest"><div>120px fest</div><div>nimmt den Rest</div></div>

Umbruch: flex-wrap

Ohne wrap quetscht Flexbox alles in eine Zeile. Mit wrap brechen Elemente um. Mit flex: 1 1 200px entsteht ein flexibles Raster ohne Media Queries:

<style>
  .raster { display: flex; flex-wrap: wrap; gap: 10px; }
  .raster > div { flex: 1 1 140px; background: #f97316; color: white; padding: 18px; border-radius: 8px; }
</style>
<div class="raster">
  <div>Karte 1</div><div>Karte 2</div><div>Karte 3</div><div>Karte 4</div><div>Karte 5</div>
</div>

Ändere die Fensterbreite: Die Karten ordnen sich automatisch neu an.

Typische Muster

Navigationsleiste

<style>
  .leiste { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #1e293b; color: white; }
  .leiste .logo { font-weight: 900; margin-right: auto; }  /* schiebt den Rest nach rechts */
  .leiste a { color: #cbd5e1; text-decoration: none; }
  .leiste a:hover { color: white; }
</style>
<nav class="leiste"><span class="logo">LOGO</span><a href="#">Start</a><a href="#">Kurse</a><a href="#">Kontakt</a></nav>

margin-right: auto auf einem Flex-Element schiebt alle folgenden an den rechten Rand.

Seitenfuß am unteren Rand

<style>
  .seite { display: flex; flex-direction: column; min-height: 200px; border: 2px solid #94a3b8; }
  .seite main { flex: 1; padding: 10px; background: #f8fafc; }
  .seite footer { background: #1e293b; color: white; padding: 8px 10px; }
</style>
<div class="seite"><header style="background:#e0e7ff;padding:8px 10px">Kopf</header><main>Wenig Inhalt, aber der Fuß bleibt unten.</main><footer>Fuß</footer></div>

Karte mit Fußzeile unten

<style>
  .karten { display: flex; gap: 10px; }
  .karte { flex: 1; display: flex; flex-direction: column; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; }
  .karte p { flex: 1; }                            /* Text füllt, Button rutscht nach unten */
  .karte button { padding: 6px; }
</style>
<div class="karten">
  <div class="karte"><h4>Kurz</h4><p>Wenig Text.</p><button>Mehr</button></div>
  <div class="karte"><h4>Lang</h4><p>Viel mehr Text, der die Karte höher macht, damit man sieht, dass die Buttons trotzdem auf einer Linie liegen.</p><button>Mehr</button></div>
</div>

Flexbox oder Grid?

• Flexbox: eindimensional (eine Reihe oder Spalte), Inhalt bestimmt die Größe: Menüs, Buttonreihen, Zentrierung
• Grid: zweidimensional (Zeilen und Spalten), Layout bestimmt die Größe: Seitenraster, Galerien

Beides lässt sich kombinieren.

Merke

• display: flex am Container; flex-direction legt die Hauptachse fest
• justify-content verteilt entlang der Hauptachse, align-items richtet quer aus
• gap für Abstände, flex-wrap: wrap für Umbrüche
• flex: 1 macht Kinder gleich breit, flex: 0 0 120px fest
• margin-left: auto schiebt Elemente nach rechts
• Mit display: flex; justify-content: center; align-items: center zentrierst du alles

Übungsaufgabe

Baue eine Kopfzeile mit Logo links und Menü rechts, darunter eine Reihe aus drei gleich breiten Karten, die auf dem Handy untereinander umbrechen.

Quiz zur Selbstkontrolle

Was macht justify-content in einer Zeile?

• Verteilt die Elemente entlang der Hauptachse (richtig)
• Richtet quer aus
• Ändert die Farbe
• Bricht Zeilen um

Was bedeutet flex: 1?

• Das Element wächst und teilt freien Platz gleichmäßig (richtig)
• Das Element hat 1 Pixel Breite
• Das Element wird versteckt
• Das Element steht an erster Stelle

Wofür ist gap?

• Abstand zwischen den Elementen (richtig)
• Rand um den Container
• Lücke im Text
• Hintergrundfarbe

Weiter im Kurs

Zurück: display, position und Überlagerung

Weiter: Layout mit CSS Grid

Alle Kapitel: HTML + CSS im Überblick