flex-grow, flex-shrink మరియు flex-basis ఎలా పనిచేస్తాయి?

Question

Accepted Answer

ఈ మూడు లక్షణాలు **flex items** లో ప్రధాన అక్షం వెంట స్థలాన్ని ఎలా పంచుకుంటాయో నియంత్రిస్తాయి. సంక్షిప్తరూపం `flex` వాటిని కలుపుతుంది.

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

## ప్రతి లక్షణం వివరించబడినది

- **`flex-basis`** — అంశం యొక్క ఆదర్శ/ప్రారంభిక ప్రధాన-అక్ష పరిమాణం (అడ్డు వరుసకు `width` వంటిది). `auto` విషయవస్తువు పరిమాణాన్ని ఉపయోగిస్తుంది.
- **`flex-grow`** — *అదనపు* స్థలం ఉంటే, ఈ అంశం ఎంత చాలా విస్తరిస్తుంది. `0` = పెరగవద్దు; అధిక సంఖ్యలు సమానుపాతంలో పెరుగుతాయి.
- **`flex-shrink`** — *తగినంత* స్థలం లేకపోతే, ఈ అంశం ఎంత సిద్ధంగా సంకుచితమవుతుంది. `0` = ఎప్పుడూ సంకోచం చేయవద్దు (ఓవర్‌ఫ్లో కారణం కావచ్చు); డిఫాల్ట్ `1` = అవసరమైన విధంగా సంకోచం చేయండి.

## సమానుపాతంలో పెరుగుతుంది

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

অতিరిక్ত స్థలం పెరుగుదల విలువల నిష్పత్తిలో విభజించబడుతుంది, సంపూర్ణ పరిమాణాలలో కాదు.

## సాధారణ సంక్షిప్తరూప విలువలు

```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` ప్రతి అంశంపై సమాన నిలువు వరుసలను చేస్తుంది; `flex: 0 0 250px` సరళమైన పేనల్‌ను నిర్ణీత-వెడల్పుతో నమ్యతగలిన ఒకటి పక్కన చేస్తుంది.

## నిజమైన లేఅవుట్: స్థిర సైడ్‌బార్ + ద్రవ సामగ్రి

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

## ఎందుకు ముఖ్యమైనది

ఈ లక్షణాలు flex లేఅవుట్‌లలో సమానుపాత పరిమాణాన్ని నియంత్రించే విధానం — సమాన నిలువు వరుసలు (`flex: 1`), స్థిర-ప్లస్-నమ్య ప్యానెల్‌లు (`flex: 0 0 X` + `flex: 1`) మరియు అవాంఛిత సంకోచం నిరోధించడం (`flex-shrink: 0`).

basis/grow/shrink ను అర్థం చేసుకోవడం Flexbox ను "అంశాలు అక్కడే ఉన్నాయి" నుండి ఖచ్చిత, ప్రతిస్పందించే నియంత్రణకు మారుస్తుంది.