flex-grow, flex-shrink અને flex-basis કેવી રીતે કામ કરે છે?

Question

IT Interview Practice · 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`) અટકાવવું.

base/grow/shrink સમજવું Flexbox ને "આઇટમો ફક્ત ત્યાં બેસી જાય છે" થી સચોટ, પ્રતિક્રિયાશીલ નિયંત્રણમાં ફેરવે છે.

પ્રત્યેક પ્રોપર્ટી સમજાવાય છે

આનુપાતિક વૃદ્ધિ

સામાન્ય શોર્ટહેન્ડ મૂલ્યો

વાસ્તવિક લેઆઉટ: નિશ્ચિત સાઇડબાર + પ્રવાહી સામગ્રી

આ શા માટે મહત્વનું છે

સંબંધિત પ્રશ્નો