Kuinka flex-grow, flex-shrink ja flex-basis toimivat?

Question

Accepted Answer

Nämä kolme ominaisuutta **flex-kohteissa** hallitsevat, kuinka ne jakavat tilaa pääakselin varrella. Lyhenne `flex` yhdistää ne.

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

## Jokainen ominaisuus selitetty

- **`flex-basis`** — kohteen ihanteellinen/alkuperäinen koko pääakselilla (kuten `width` riville). `auto` käyttää sisällön kokoa.
- **`flex-grow`** — jos *ylimääräistä* tilaa on, kuinka ahneesti tämä kohde laajenee. `0` = ei kasvua; korkeammat luvut kasvavat suhteellisesti.
- **`flex-shrink`** — jos tilaa *ei ole* riittävästi, kuinka halukkaasti tämä kohde kutistuu. `0` = älä koskaan kutisty (voi aiheuttaa ylivuotoa); oletus `1` = kutisty tarpeen mukaan.

## Suhteellinen kasvu

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

Ylimääräinen tila jaetaan kasvuarvojen suhteessa, ei absoluuttisten koon mukaan.

## Yhteiset lyhennearot

```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` jokaisessa kohteessa tekee yhtäläisiä sarakkeita; `flex: 0 0 250px` tekee jäykkää kiinteän leveyden panelia joustavaa vieressä.

## Todellinen asettelu: kiinteä sivupalkki + nestemäinen sisältö

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

## Miksi sillä on merkitystä

Nämä ominaisuudet ovat kuinka hallitset suhteellista kokoa flex-asetteluissa — yhtäläisiä sarakkeita (`flex: 1`), kiinteitä plus nestemäisiä paneeleita (`flex: 0 0 X` + `flex: 1`) ja ei-toivottavan kutistumisen estämistä (`flex-shrink: 0`).

Basis/grow/shrink-ymmärrys muuttaa Flexboxin "kohteet vain istuvat siellä" tarkaksi, reagoivaksi hallinnaksi.