Piye cara flex-grow, flex-shrink lan flex-basis bisa tumindak?

Question

Accepted Answer

Telung properti iki ing **flex items** ngontrol carane bagi-bagi ruang ing sepanjang sumbu utama. Singkatan `flex` nggabungake semuane.

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

## Saben properti dijelaske

- **`flex-basis`** — ukuran sumbu utama ideal/awal item (kaya `width` kanggo baris). `auto` nggunakake ukuran konten.
- **`flex-grow`** — yen ana *ruang ekstra*, carane item iki berkembang kanthi srakah. `0` = aja berkembang; nomer luwih dhuwur berkembang kanthi proporsional.
- **`flex-shrink`** — yen *ora ana cukup* ruang, carane item iki menciut kanthi gampang. `0` = ora mah menciut (bisa nyebabake overflow); standar `1` = menciut menawa kudu.

## Berkembang kanthi proporsional

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

Ruang ekstra dibagi kanthi rasio nilai grow, ora ukuran absolut.

## Nilai singkatan umum

```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` ing saben item nggawe kolom padha; `flex: 0 0 250px` nggawe panel lebar tetep cacah ing segane panel fleksibel.

## Tata letak nyata: sidebar tetep + konten cairan

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

## Kenapa iku penting

Properti iki carane kanggo ngontrol ukuran proporsional ing tata letak flex — kolom padha (`flex: 1`), panel tetep-lan-cairan (`flex: 0 0 X` + `flex: 1`), lan nyegah menciute sing ora kepingin (`flex-shrink: 0`).

Ngerteni basis/grow/shrink ngganti Flexbox saka "item mung ana ing kono" dadi kontrol sing akurat lan responsif.