Hvordan fungerer flex-grow, flex-shrink og flex-basis?

Question

Accepted Answer

Disse tre egenskaber på **flex-elementer** styrer, hvordan de deler plads langs hovedaksen. Forkortelsen `flex` kombinerer dem.

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

## Hver egenskab forklaret

- **`flex-basis`** — elementets ideelle/initiale størrelse på hovedaksen (som `width` for en række). `auto` bruger indholdets størrelse.
- **`flex-grow`** — hvis der er *ekstra* plads, hvor grådigt dette element udvides. `0` = vokser ikke; højere tal vokser proportionalt.
- **`flex-shrink`** — hvis der *ikke* er nok plads, hvor villigt dette element krymper. `0` = krymper aldrig (kan forårsage overløb); standard `1` = krymper efter behov.

## Voksende proportionalt

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

Ekstra plads opdeles i forholdet mellem vækstværdier, ikke absolutte størrrelser.

## Almindelige forkortede værdier

```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` på hvert element gør lige kolonner; `flex: 0 0 250px` gør et stift fast-bredde panel ved siden af ​​et fleksibelt.

## En ægte layout: fast sidebjælke + flydende indhold

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

## Hvorfor det betyder noget

Disse egenskaber er, hvordan du styrer proportional størrelse i flex-layouts — lige kolonner (`flex: 1`), fast-plus-flydende paneler (`flex: 0 0 X` + `flex: 1`) og forebyggelse af uønsket krympning (`flex-shrink: 0`).

Forståelse af basis/grow/shrink forvandler Flexbox fra "elementer sidder bare der" til præcis, responsiv kontrol.