Jak fungují flex-grow, flex-shrink a flex-basis?

Question

Accepted Answer

Tyto tři vlastnosti na **flex položkách** řídí, jak si dělí prostor podél hlavní osy. Zkratka `flex` je kombinuje.

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

## Vysvětlení každé vlastnosti

- **`flex-basis`** — ideální/počáteční velikost položky na hlavní ose (jako `width` pro řádek). `auto` používá velikost obsahu.
- **`flex-grow`** — pokud je *extra* prostor, jak chamtivě se tato položka rozšíří. `0` = nezvětšovat; vyšší čísla se rozšíří proporcionálně.
- **`flex-shrink`** — pokud není *dost* místa, jak ochotně se tato položka zmenší. `0` = nikdy nezmenšovat (může způsobit přetečení); výchozí `1` = podle potřeby zmenšit.

## Proporcionální růst

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

Extra prostor je rozdělen v poměru hodnot růstu, ne v absolutních velikostech.

## Běžné zkrácené hodnoty

```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` na každé položce vytváří stejné sloupce; `flex: 0 0 250px` vytváří rigidní panel s pevnou šířkou vedle flexibilního.

## Skutečné rozložení: pevný postranní panel + dynamický obsah

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

## Proč je to důležité

Tyto vlastnosti jsou způsob, jak kontrolujete proporcionální velikost v rozloženích flexbox — stejné sloupce (`flex: 1`), panely pevné + dynamické (`flex: 0 0 X` + `flex: 1`) a prevence nežádoucího zmenšování (`flex-shrink: 0`).

Pochopení basis/grow/shrink změní Flexbox z "položky tam jen sedí" na přesné, reagující řízení.