Flexbox

Flexbox ordnet Elemente in einer Richtung an: in einer Reihe oder in einer Spalte. Für Kopfleisten, Menüs, Buttons mit Icon und das Innere von Karten ist es das Mittel der Wahl.

Was du am Ende kannst

• einen Flex-Container anlegen und die Achsen erklären
• Elemente verteilen und ausrichten
• Platz mit flex verteilen
• Umbruch und Abstände einsetzen
• den Flex-Inspektor der DevTools benutzen

Live-Coding zum Mitmachen

⤓ demo-13-flexbox.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html, stil.css

Container und Items

display: flex wirkt auf die direkten Kinder. Sie werden zu Flex-Items.

Hauptachse und Querachse

.reihe { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.5rem; background: #f1f3f9; }
.reihe div { padding: 0.25rem 0.75rem; background: #c7d2fe; }
.spalte { flex-direction: column; }

<div class="reihe">
  <div>row</div><div>ist</div><div>Standard</div>
</div>
<div class="reihe spalte">
  <div>column</div><div>tauscht</div><div>die Achsen</div>
</div>

Alles in Flexbox bezieht sich auf zwei Achsen:

flex-direction: row
 ────────── Hauptachse ─────────▶      justify-content
 │  ┌─────┐ ┌─────┐ ┌─────┐
 │  │     │ │     │ │     │
 ▼  └─────┘ └─────┘ └─────┘
Querachse                              align-items

Bei flex-direction: column tauschen die Achsen. Mit justify-content verteilst du dann von oben nach unten.

Verteilen und ausrichten

justify-content und align-items

.reihe { display: flex; gap: 0.5rem; height: 4rem; margin-bottom: 0.5rem; background: #f1f3f9; }
.reihe div { padding: 0 0.75rem; background: #c7d2fe; }
.a { justify-content: space-between; align-items: center; }
.b { justify-content: center; align-items: flex-end; }
.c { justify-content: flex-end; align-items: stretch; }

<div class="reihe a"><div>space-between</div><div>center</div></div>
<div class="reihe b"><div>center</div><div>flex-end</div></div>
<div class="reihe c"><div>flex-end</div><div>stretch</div></div>

Eigenschaft	Achse	Werte
justify-content	Hauptachse	flex-start, center, flex-end, space-between, space-around, space-evenly
align-items	Querachse	stretch (Standard), flex-start, center, flex-end, baseline
align-self	Querachse, ein einzelnes Item	wie align-items
gap	Abstand zwischen den Items	jede Länge

Endlich einfach: Mittig in beiden Richtungen geht mit display: flex, justify-content: center und align-items: center.

Ein nützlicher Trick: margin-inline-start: auto an einem Item schiebt es und alle folgenden nach rechts.

Platz verteilen

flex ist die Kurzform von drei Werten: wachsen, schrumpfen, Grundgröße.

Wer bekommt den freien Platz?

.reihe { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.reihe > * { padding: 0.25rem 0.5rem; background: #c7d2fe; }
.suche { flex: 1; }
.gross { flex: 2; }
.karten { flex-wrap: wrap; }
.karten > * { flex: 1 1 10rem; }

<div class="reihe"><div>Logo</div><div class="suche">flex: 1 nimmt den freien Platz</div><div>Knopf</div></div>
<div class="reihe"><div class="suche">flex: 1</div><div class="gross">flex: 2, doppelt so viel</div></div>
<div class="reihe karten"><div>Karte</div><div>flex: 1 1 10rem</div><div>bricht um</div><div>wenn es eng wird</div></div>

Schreibweise	Bedeutung
flex: 1	nimmt seinen Anteil am freien Platz
flex: 2	bekommt doppelt so viel wie flex: 1
flex: 1 1 10rem	Grundgröße 10rem, darf wachsen und schrumpfen
flex: none	bleibt so groß, wie sein Inhalt verlangt

flex-wrap: wrap erlaubt den Umbruch in neue Zeilen. So entstehen flexible Kartenreihen ohne Media Query.

Reihenfolge

order ändert die optische Reihenfolge, row-reverse dreht sie um. Vorsicht: Tastatur und Screenreader folgen weiter dem HTML. Wenn die Reihenfolge wichtig ist, ändere das HTML.

Der Flex-Inspektor

Im Elements-Tab steht neben einem Flex-Container die Marke flex. Ein Klick darauf zeigt die Lücken und die Verteilung direkt auf der Seite an. Im Styles-Bereich öffnet ein kleines Symbol einen Editor für die Eigenschaften zum Durchklicken. Firefox bietet das Gleiche im Layout-Tab.

Live-Coding: Das Innere der App

stil.css

/* Kopf: Marke links, Nutzer rechts, beide mittig in der Höhe */
.kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--abstand-m);
}

/* Menü waagerecht */
.seitenleiste ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* Das Brett: Spalten teilen sich die Breite, brechen aber bei wenig Platz um */
.brett {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand-m);
}

.spalte {
  flex: 1 1 16rem;
}

/* Karten untereinander: gap ersetzt margin */
.karten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.karte {
  margin-top: 0;
}

/* Fuß der Karte: Stufe links, Datum rechts */
.karte-fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Auch das Brett läuft erst einmal als Flexbox. Das funktioniert, aber die Spalten der letzten Zeile sind unterschiedlich breit, wenn das Fenster schmal wird. Das Problem löst im nächsten Kapitel Grid.

Übung

Starter für die Übung

⤓ uebung-13-flexbox.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, stil.css, team.css, team.html

Die Seite team.html listet das Team, das Aussehen steht in team.css. Es fehlt nur das Layout.

Stufe 1: Zeile

Jede .person wird eine Zeile, deren Bestandteile in der Höhe mittig stehen und Abstand haben.

Stufe 2: Verteilen

Der Name nimmt den freien Platz ein, der Knopf rückt nach rechts. Der Buchstabe steht genau in der Mitte seines Kreises. Der Kreis darf nicht gestaucht werden.

Stufe 3: Werkzeugleiste

.werkzeuge ordnet die Knöpfe mit Abstand in einer Reihe an und bricht bei wenig Platz um.

Für Schnelle

„Person einladen“ bleibt links, die beiden anderen Knöpfe rücken nach rechts. Eine Zeile CSS genügt.