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

Question

Accepted Answer

Disse tre egenskapene på **flex items** styrer hvordan de deler plass langs hovedaksen. Forkorting `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 egenskap forklart

- **`flex-basis`** — varens ideelle/initiale hovedaksestørrelse (som `width` for en rad). `auto` bruker innholdsstørrelsen.
- **`flex-grow`** — hvis det er *ekstra* plass, hvor grådigt utvides denne varen. `0` = ikke vokse; høyere tall vokser proporsjonalt.
- **`flex-shrink`** — hvis det *ikke er nok* plass, hvor villig krymper denne varen. `0` = aldri krympe (kan forårsake overflyt); standard `1` = krympe etter behov.

## Vokser proporsjonalt

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

Ekstra plass fordeles i forholdet mellom vekstkvalitetene, ikke absolutt størrelse.

## Vanlige forkortelsesverdier

```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å hver vare gjør like kolonner; `flex: 0 0 250px` gjør et stivt panel med fast bredde ved siden av et fleksibelt.

## En virkelig oppsett: fast sidestolpe + flytende innhold

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

## Hvorfor det betyr noe

Disse egenskapene er hvordan du styrer proporsjonal størrelse i flex-oppsett — like kolonner (`flex: 1`), fast-pluss-flytende paneler (`flex: 0 0 X` + `flex: 1`), og å unngå uønsket krymping (`flex-shrink: 0`).

Å forstå basis/vekst/krymping gjør Flexbox fra "varer sitter bare der" til presis, responsiv kontroll.