Hur fungerar flex-grow, flex-shrink och flex-basis?

Question

Accepted Answer

Dessa tre egenskaper på **flex-element** styr hur de delar utrymme längs huvudaxeln. Förkortningen `flex` kombinerar 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 */
```

## Varje egenskap förklarad

- **`flex-basis`** — elementets ideala/initiala storlek längs huvudaxeln (som `width` för en rad). `auto` använder innehållets storlek.
- **`flex-grow`** — om det finns *extra* utrymme, hur girig expanderar detta element. `0` = väx inte; högre siffror växer proportionellt.
- **`flex-shrink`** — om det inte finns *tillräckligt* utrymme, hur villigt drar detta element ihop sig. `0` = dra aldrig ihop (kan orsaka överflöde); standardvärde `1` = dra ihop vid behov.

## Växa proportionellt

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

Extra utrymme delas i förhållandet mellan tillväxtvärdena, inte absoluta storlekar.

## Vanliga förkortade värden

```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å varje element gör lika kolumner; `flex: 0 0 250px` gör en styv panel med fast bredd bredvid en flexibel.

## En verklig layout: fast sidopanel + flytande innehål

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

## Varför det spelar roll

Dessa egenskaper är hur du styr proportionell storlek i flex-layouter — lika kolumner (`flex: 1`), fast-plus-flexibel-paneler (`flex: 0 0 X` + `flex: 1`) och förhindra oönskad krympning (`flex-shrink: 0`).

Att förstå basis/grow/shrink förvandlar Flexbox från "element sitter bara där" till exakt, responsiv kontroll.