Wie funktionieren flex-grow, flex-shrink und flex-basis?

Question

Accepted Answer

Diese drei Eigenschaften auf **Flex-Elementen** steuern, wie sie Platz entlang der Hauptachse teilen. Die Kurzform `flex` kombiniert sie.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## Jede Eigenschaft erklärt

- **`flex-basis`** — die ideale/initiale Größe des Elements auf der Hauptachse (wie `width` für eine Zeile). `auto` verwendet die Inhaltsgröße.
- **`flex-grow`** — wenn *extra* Platz vorhanden ist, wie gierig dieses Element expandiert. `0` = nicht wachsen; höhere Zahlen wachsen proportional.
- **`flex-shrink`** — wenn *nicht genug* Platz vorhanden ist, wie bereitwillig dieses Element schrumpft. `0` = nie schrumpfen (kann zu Überläufen führen); Standard `1` = nach Bedarf schrumpfen.

## Proportionales Wachstum

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

Extra Platz wird im Verhältnis der Wachstumswerte aufgeteilt, nicht absolute Größen.

## Häufige Kurzformwerte

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` auf jedem Element macht gleiche Spalten; `flex: 0 0 250px` macht ein starres Panel mit fester Breite neben einem flexiblen.

## Ein echtes Layout: feste Seitenleiste + dynamischer Inhalt

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## Warum es wichtig ist

Diese Eigenschaften sind, wie Sie proportionale Größenänderungen in Flex-Layouts steuern — gleiche Spalten (`flex: 1`), feste-plus-flexible Panels (`flex: 0 0 X` + `flex: 1`) und Vermeidung unerwünschten Schrumpfens (`flex-shrink: 0`).

Das Verständnis von basis/grow/shrink macht Flexbox von "Elementen sitzen einfach da" zu präziser, reaktiver Kontrolle.