Jak działają flex-grow, flex-shrink i flex-basis?

Question

Accepted Answer

Te trzy właściwości na **flex items** kontrolują, jak dzielą przestrzeń wzdłuż głównej osi. Skrót `flex` je łączy.

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

## Wyjaśnienie każdej właściwości

- **`flex-basis`** — idealna/początkowa rozmiar elementu wzdłuż głównej osi (jak `width` dla wiersza). `auto` używa rozmiaru zawartości.
- **`flex-grow`** — jeśli jest *dodatkowa* przestrzeń, jak chciwie ten element się rozszerza. `0` = nie rozszerzaj się; wyższe liczby rosną proporcjonalnie.
- **`flex-shrink`** — jeśli brakuje *wystarczającej* przestrzeni, jak łatwo ten element się zmniejsza. `0` = nigdy się nie zmniejszaj (może spowodować przepełnienie); domyślnie `1` = zmniejszaj się w razie potrzeby.

## Proporcjonalny wzrost

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

Dodatkowa przestrzeń jest podzielona w stosunku wartości wzrostu, a nie rozmiarów bezwzględnych.

## Typowe wartości skrótu

```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żdym elemencie tworzy równe kolumny; `flex: 0 0 250px` tworzy sztywny panel o stałej szerokości obok elastycznego.

## Rzeczywisty układ: stały pasek boczny + elastyczna zawartość

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

## Dlaczego to ważne

Te właściwości kontrolują jak ustawiać proporcjonalny rozmiar w układach flex — równe kolumny (`flex: 1`), panele stałe-plus-elastyczne (`flex: 0 0 X` + `flex: 1`), i unikanie niechcianego zmniejszania (`flex-shrink: 0`).

Zrozumienie basis/grow/shrink zmienia Flexbox z "elementy po prostu siedzą tutaj" na precyzyjną, responsywną kontrolę.