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` = कधीही संकुचित होणार नाही (overflow होऊ शकते); डिफॉल्ट `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 ला "आयटम फक्त तेथे बसतात" ते सटीक, प्रतिक्रियाशील नियंत्रणात रूपांतरित करते.