flex-grow, flex-shrink र flex-basis कसरी काम गर्छन्?

Question

Accepted Answer

यो तीनवटा गुणहरू **flex items** मा काम गरी मुख्य अक्षको साथ स्थान साझेदारी कसरी गर्ने भनेर नियन्त्रण गर्छन्। `flex` shorthand यिनलाई जोडेर दिन्छ।

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

अतिरिक्त स्थान वृद्धि मानहरूको अनुपातमा विभाजित गरिन्छ, निरपेक्ष आकारहरूमा होइन।

## सामान्य shorthand मानहरू

```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 layouts मा आनुपातिक आकार नियन्त्रण गर्नु भनेर — बराबरको स्तम्भहरू (`flex: 1`), निश्चित-प्लस-तरल प्यानलहरू (`flex: 0 0 X` + `flex: 1`), र अनचाहेको सिकुडाइबाट बचाउँदै (`flex-shrink: 0`)।

आधार/वृद्धि/सिकुडाइ बुझ्नु Flexbox लाई "आइटमहरू यहाँ बस बस्छन्" बाट सटीक, प्रतिक्रियाशील नियन्त्रणमा परिणत गर्छ।