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-ஐ "பொருட்கள் அங்கேயே உள்ளன" என்பதிலிருந்து துல்லியமான, பதிலளிக்கக்கூடிய கட்டுப்பாடாக மாற்றுகிறது.