Si funksionojnë flex-grow, flex-shrink dhe flex-basis?

Question

Accepted Answer

Këto tre veti në **elementet flex** kontrollojnë se si ndajnë hapësirën përgjatë boshtit kryesor. Shkurtesa `flex` i kombinon ato.

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

## Secila veti e shpjeguar

- **`flex-basis`** — madhësia ideale/fillestare e elementit përgjatë boshtit kryesor (si `width` për një rresht). `auto` përdor madhësinë e përmbajtjes.
- **`flex-grow`** — nëse ka hapësirë *shtesë*, sa lakmisht ky element zgjerohet. `0` = mos rrit; numrat më të lartë rriten proporcionalisht.
- **`flex-shrink`** — nëse nuk ka *hapësirë të mjaftueshme*, sa shpejt ky element tkurret. `0` = mos tkurr kurrë (mund të shkaktojë tejkalim); standardi `1` = tkurr sipas nevojës.

## Rritja proporcionalisht

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

Hapësira shtesë ndahet në raportin e vlerave të rritjes, jo në madhësi absolute.

## Vlera të zakonshme me shkurtesë

```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` në çdo element bën kolona të barabarta; `flex: 0 0 250px` bën një panel të ngurtë me gjerësi fikse pranë atij fleksibël.

## Një plan real: shirit anësor fiks + përmbajtje fleksibël

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

## Pse është e rëndësishme

Këto veti janë se si kontrolloni madhësinë proporcionale në planin flex — kolona të barabarta (`flex: 1`), panele fikse plus fleksibël (`flex: 0 0 X` + `flex: 1`) dhe parandalimi i tkurrjes të padëshiruar (`flex-shrink: 0`).

Kuptimi i basis/grow/shrink e shndërron Flexbox nga "elementet thjesht qëndrojnë atje" në kontrollë të saktë dhe odzivëse.