Nawa flex-grow, flex-shrink da flex-basis suke aiki?

Question

Accepted Answer

Waɗannan kaddarorin uku akan **flex items** suna sarrafa yadda suke raba sarari tare da tushe-na-gida. Gajere `flex` yana haɗu da su.

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

## Kowane kadarori ba shi bayyana

- **`flex-basis`** — girma-bukatacciyar/asali na abu-na-gida (kamar `width` don layina). `auto` yana amfani da girman abun ciki.
- **`flex-grow`** — idan akwai *sarari na ƙari*, jiya ita abu nan yafi girma. `0` = kada girma; manyan lambobi suna girma cikin riba.
- **`flex-shrink`** — idan babu *isasshen sarari*, jiya ita abu nan yafi raguwa. `0` = mai yiwuwar raguwa (za a iya haifar da yada); zaɓin `1` = raguwa kamar yadda ake bukatar.

## Girma cikin riba

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

An raba sarari na ƙari a cikin riba na girman ƙima, ba girma-jiya ba.

## Ɓata-ɗaka-fuɗi na gajere

```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` akan kowane abu yana yin daidai-daidai-kolin; `flex: 0 0 250px` yana yin zobe mai tsayi-a-tsayi kusa da maalim-da-faɗi.

## Ainiyin raye: ginshi-karkara-a-gida + karin abun ciki

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

## Me ya sa haka masu mahimmanci

Waɗannan kaddarorin sune yadda kake aiwatar-da girman riba a raye-na-faɗi — daidai-daidai-koliyen (`flex: 1`), zoben-a-tsayi-a-gida-da-faɗi-da-faɗi (`flex: 0 0 X` + `flex: 1`), da jingina raguwan ba-bukattu (`flex-shrink: 0`).

Sanin base/grow/shrink ya juya Flexbox daga "abubuwa suke jiya a ciki" zuwa hadewa-da-kansa, amintacciyar sarrafa.