როგორ მუშაობს 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 */
```

დამატებითი სივრცე იყოფა grow მნიშვნელობების კოეფიციენტის მიხედვით, არა აბსოლუტური ზომების მიხედვით.

## საერთო სტიმული მნიშვნელობები

```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-ს "ელემენტები უბრალოდ იქ დგანან"-დან ზუსტ, რესპონსიულ მართვაში.