Was ist Flexbox und wie zentrierst du damit Inhalte?

Question

Accepted Answer

**Flexbox** ist ein eindimensionales Layoutsystem — es ordnet Elemente in einer einzelnen **Reihe** oder **Spalte** an und verteilt den Platz entlang dieser Linie. Es ist die moderne Antwort auf Ausrichtungs- und Abstandsprobleme, die früher floats und Tricks erforderten.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## Die zwei Achsen

Flexbox hat eine **Hauptachse** (die Richtung, in der Elemente fließen) und eine **Querachse** (senkrecht). Die Eigenschaften werden auf sie abgebildet:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Perfektes Zentrieren — der berühmte Use Case

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Diese drei Zeilen zentrieren ein Kind sowohl horizontal als auch vertikal — eine Aufgabe, die vor Flexbox notorisch schwierig war.

## Häufige Muster

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` Optionen sind `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Warum es wichtig ist

Flexbox ist das Werkzeug des Alltags für Navigationsleisten, Schaltflächengruppen, Kartenreihen, Zentrieren und jedes "Reihe von Elementen" Layout.

Das Verständnis des Hauptachse-/Querachsenmodells (und dass `justify-content`/`align-items` ihre Bedeutung tauschen, wenn du `flex-direction` änderst) ist das Schlüsselmodell.

Verwende Flexbox für 1D-Layouts und Grid für 2D.