Kaip veikia flex-grow, flex-shrink ir flex-basis?

Question

Accepted Answer

Šios trys savybės **flex elementuose** kontroliuoja, kaip jie dalijasi vieta pagrindinės ašies metu. Sutrumpintasis žymėjimas `flex` juos sujungia.

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

## Kiekviena savybė paaiškinta

- **`flex-basis`** — elemento ideali/pradinė pagrindinės ašies dydis (panašus į `width` eilutėje). `auto` naudoja turinio dydį.
- **`flex-grow`** — jei yra *papildomos* vietos, kaip greitai šis elementas išsiplečia. `0` = neišplečiasi; didesni skaičiai išsiplečia proporcingai.
- **`flex-shrink`** — jei nepakanka vietos, kaip greitai šis elementas sutrumpėja. `0` = niekada nesutrumpėja (gali sukelti overflow); numatytoji reikšmė `1` = sutrumpėja jei reikia.

## Proporcingai augimas

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

Papildoma vieta dalijama pagal augimo reikšmių santykį, o ne absoliutų dydį.

## Įprasti sutrumpintieji žymėjimai

```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` kiekviename elemente sukuria lygias stulpeliais; `flex: 0 0 250px` sukuria standartų fiksuoto pločio skydelį šalia lanksčiojo.

## Tikrasis išdėstymas: fiksuota šoninė juosta + skystas turinys

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## Kodėl tai svarbu

Šios savybės – tai kaip kontroliuoti proporcingą dydžio nustatymą flex išdėstymuose — lygūs stulpeliai (`flex: 1`), fiksuoti-plius-skystieji skydeliai (`flex: 0 0 X` + `flex: 1`), ir nepageidautino sumažėjimo prevencija (`flex-shrink: 0`).

Supratę basis/grow/shrink paverčiate Flexbox iš "elementai tiesiog sėdi" į tikslią, reaguojančią kontrolę.