Bagaimanakah flex-grow, flex-shrink dan flex-basis berfungsi?

Question

IT Interview Practice · Accepted Answer

Ketiga sifat ini pada **flex items** mengawal bagaimana mereka berkongsi ruang sepanjang paksi utama. Singkatan `flex` menggabungkannya.

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

## Setiap sifat dijelaskan

- **`flex-basis`** — saiz paksi utama ideal/awal item (seperti `width` untuk baris). `auto` menggunakan saiz kandungan.
- **`flex-grow`** — jika ada ruang *lebih*, bagaimana serakah item ini berkembang. `0` = jangan tumbuh; nombor lebih tinggi tumbuh secara berkadar.
- **`flex-shrink`** — jika tidak ada ruang *cukup*, seberapa mudah item ini menyusut. `0` = jangan pernah menyusut (boleh menyebabkan overflow); lalai `1` = menyusut mengikut keperluan.

## Berkembang secara berkadar

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

Ruang lebih dibahagikan dalam nisbah nilai pertumbuhan, bukan saiz mutlak.

## Nilai singkatan biasa

```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` pada setiap item membuat lajur yang sama; `flex: 0 0 250px` membuat panel lebar tetap tegar di sebelah satu yang fleksibel.

## Tata letak sebenar: bar sisi tetap + kandungan cecair

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

## Mengapa ia penting

Sifat-sifat ini adalah cara anda mengawal saiz berkadar dalam tata letak flex — lajur yang sama (`flex: 1`), panel tetap-tambah-cecair (`flex: 0 0 X` + `flex: 1`), dan mencegah pengecilan yang tidak diingini (`flex-shrink: 0`).

Memahami basis/grow/shrink mengubah Flexbox daripada "item hanya duduk di sana" menjadi kawalan yang tepat dan responsif.

Setiap sifat dijelaskan

Berkembang secara berkadar

Nilai singkatan biasa

Tata letak sebenar: bar sisi tetap + kandungan cecair

Mengapa ia penting

Soalan berkaitan