Hoe werken flex-grow, flex-shrink en flex-basis?

Question

Accepted Answer

Deze drie eigenschappen op **flex items** bepalen hoe ze ruimte langs de hoofdas verdelen. De shorthand `flex` combineert ze.

```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 */
```

## Elke eigenschap uitgelegd

- **`flex-basis`** — de ideale/initiële hoofdas-grootte van het item (zoals `width` voor een rij). `auto` gebruikt de inhoudsgrootte.
- **`flex-grow`** — als er *extra* ruimte is, hoe gretig breidt dit item uit. `0` = niet uitbreiden; hogere getallen groeien proportioneel.
- **`flex-shrink`** — als er *niet genoeg* ruimte is, hoe gemakkelijk krimpt dit item. `0` = nooit krimpen (kan overflow veroorzaken); standaard `1` = krimpen indien nodig.

## Proportioneel groeien

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

Extra ruimte wordt verdeeld in de verhouding van de groewaarden, niet absolute grootte.

## Veelgebruikte shorthand-waarden

```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` op elk item maakt gelijke kolommen; `flex: 0 0 250px` maakt een stijf paneel met vaste breedte naast een flexibel.

## Een echte lay-out: vaste zijbalk + fluïde inhoud

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

## Waarom het belangrijk is

Deze eigenschappen bepalen hoe je proportionele grootte in flex lay-outs beheert — gelijke kolommen (`flex: 1`), vaste-plus-fluïde panelen (`flex: 0 0 X` + `flex: 1`), en het voorkomen van ongewenste krimp (`flex-shrink: 0`).

Basis/groei/krimp begrijpen verandert Flexbox van "items zitten hier gewoon" naar precieze, responsieve controle.