Kako funkcioniraju flex-grow, flex-shrink i flex-basis?

Question

Accepted Answer

Ova tri svojstva na **flex stavkama** kontroliraju kako dijele prostor duž glavne osi. Kratica `flex` ih 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 */
```

## Svako svojstvo objašnjeno

- **`flex-basis`** — idealna/početna veličina stavke duž glavne osi (kao `width` za red). `auto` koristi veličinu sadržaja.
- **`flex-grow`** — ako postoji *dodatni* prostor, koliko požudno ova stavka raste. `0` = nemoj rasti; veći brojevi rastu proporcionalno.
- **`flex-shrink`** — ako nema *dovoljno* prostora, koliko lako ova stavka se skuplja. `0` = nikad se ne skupljaj (može uzrokovati prekoračenje); zadana vrijednost `1` = skupljaj po potrebi.

## Proporcionalan rast

```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 dijeli u omjeru vrijednosti rasta, a ne apsolutnih veličina.

## Uobičajene vrijednosti kratica

```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 svakoj stavci čini jednake stupce; `flex: 0 0 250px` čini kruti panel fiksne širine pored fleksibilnog.

## Stvarni raspored: fiksna bočna traka + fluidni sadržaj

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

## Zašto je ovo važno

Ova svojstva kontroliraju proporcionalno određivanje veličine u flex rasporedima — jednaki stupci (`flex: 1`), paneli fiksni-plus-fluidni (`flex: 0 0 X` + `flex: 1`), i sprječavanje neželjenog skupljanja (`flex-shrink: 0`).

Razumijevanje basis/grow/shrink pretvara Flexbox iz "stavke samo sjede" u preciznu, odzivnu kontrolu.