Je, flex-grow, flex-shrink na flex-basis hufanya kazi vipi?

Question

Accepted Answer

Mali matatu haya kwenye **vipengele vya flex** yanadhibiti jinsi yanavyogawanya nafasi kando ya mhimili mkuu. Kichwa `flex` kinachanganya hayakote.

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

## Kila mali iliyoelezwa

- **`flex-basis`** — saizi bora/ya mwanzo ya kipengele kando ya mhimili mkuu (kama `width` kwa safu). `auto` inatumia saizi ya msimu.
- **`flex-grow`** — kama kuna nafasi *ya ziada*, kipengele hiki kinaongeza kiwango gani. `0` = usigezwe; namba za juu huziduka kwa uwiano.
- **`flex-shrink`** — kama hakuna nafasi *ya kutosha*, kipengele hiki kinapungua kiwango gani. `0` = usigezwe haba (inaweza kusababisha kuzidi); chaguo-msingi `1` = ungeza kama inahitajika.

## Kuongezeleka kwa uwiano

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

Nafasi ya ziada imegawanywa katika uwiano wa maadili ya ukuaji, si saizi kabisa.

## Maadili ya kawaida ya kichwa

```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` kwenye kila kipengele hufanya safuwima sawa; `flex: 0 0 250px` hufanya paneli ngumu yenye upana imara karibu na moja inayobadilika.

## Ratiba halisi: upande imara + msimu wenye uwezo wa kusogea

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

## Kwa nini inafaa

Mali hii ndio jinsi unavyodhibiti ukubwa wa uwiano katika ratiba za flex — safuwima sawa (`flex: 1`), paneli zenye imara-plus-njia (`flex: 0 0 X` + `flex: 1`) na kuwazuia kupungua kisichohitajika (`flex-shrink: 0`).

Kuelewa basis/grow/shrink hubadilisha Flexbox kutoka "vipengele viko tu hapo" kuwa udhibiti sahihi, wenye majibu.