Kako delujejo flex-grow, flex-shrink in flex-basis?

Question

Accepted Answer

Te tri lastnosti na **flex postavkah** nadzorujejo, kako si delijo prostor vzdolž glavne osi. Okrajšava `flex` jih kombinira.

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

## Vsaka lastnost razložena

- **`flex-basis`** — idealna/začetna velikost postavke vzdolž glavne osi (kot je `width` za vrstico). `auto` uporablja velikost vsebine.
- **`flex-grow`** — če je *dodatnega* prostora, kako pohlepno se ta postavka razširi. `0` = ne rasti; višje številke rastejo sorazmerno.
- **`flex-shrink`** — če ni *dovolj* prostora, kako hitro se ta postavka skrči. `0` = nikoli se ne skrči (lahko povzroči prekoračitev); privzeto `1` = skrči se po potrebi.

## Rast sorazmerno

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

Dodatni prostor se deli v razmerju vrednosti rasti, ne absolutnih velikosti.

## Pogoste okrajšane vrednosti

```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 vsaki postavki naredi enake stolpce; `flex: 0 0 250px` naredi togo ploščo s fiksno širino ob fleksibilni.

## Pravi razpored: fiksna stranska vrstica + tekoča vsebina

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

## Zakaj je to pomembno

Te lastnosti so način, kako nadzorujete sorazmerno velikost v flex razporedih — enaki stolpci (`flex: 1`), fiksne in fleksibilne plošče (`flex: 0 0 X` + `flex: 1`) ter preprečevanje nezaželjenega krčenja (`flex-shrink: 0`).

Razumevanje basis/grow/shrink spremeni Flexbox iz "postavke samo sedijo tam" v natančno, odzivno kontrolo.