Kif jaħdmu flex-grow, flex-shrink u flex-basis?

Question

Accepted Answer

Dawn it-tliet proprjetajiet fuq **flex items** jikkontrollawjaż jeżu jaqsmu l-ispazju 'il fuq tal-assi prinċipali. L-abbrevjazzjoni `flex` tigħaqqadha.

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

## Kull proprjetà spjegata

- **`flex-basis`** — id-daqs ideali/inizjali tal-assi prinċipali tal-element (bħal `width` għal ringiela). `auto` juża d-daqs tal-kontenut.
- **`flex-grow`** — jekk hemm ispazju *extra*, kemm min-nies għandu jeħseb din l-element li tkebber. `0` = tagħxa; numri ogħla jikbru proporzjonalment.
- **`flex-shrink`** — jekk hemm ispazju *mhux biżżejjed*, kemm faċli din l-element tinkompatta. `0` = qatt ma tinkompatta (jista' jikkawża overflow); default `1` = tinkompatta skond il-ħtieġa.

## Tkabbir proporzjonalment

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

L-ispazju extra jinqasam bil-proporzjon tal-valuri tal-kbir, mhux id-daqsin assolut.

## Valuri abbrevjazzjoni komuni

```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` fuq kull element jagħmel kolonni ugwali; `flex: 0 0 250px` jagħmel pannell ta' wisa 'fiss misnuj ħdejn wieħed flessibli.

## Layout reali: sidebar fiss + kontenut likwid

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

## Għaliex dan hu importanti

Dawn il-proprjetajiet huma kif tikkontrolla d-daqs proporzjonali fil-layouts flex — kolonni ugwali (`flex: 1`), pannelli fiss-plus-likwidi (`flex: 0 0 X` + `flex: 1`), u prevenzjoni tal-kumpattizzazzjoni mhux mixtieqa (`flex-shrink: 0`).

Fhim ta' basis/grow/shrink jibdel il-Flexbox minn "l-elementi sempliċement qiegħdu hemmhekk" ġo kontroll preċiż u responsiv.