Hogyan működik a flex-grow, flex-shrink és flex-basis?

Question

Accepted Answer

Ez a három tulajdonság a **flex elemek** esetén szabályozza, hogy hogyan osztoznak a téren a fő tengely mentén. A `flex` rövidítés összeköti őket.

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

## Minden tulajdonság magyarázata

- **`flex-basis`** — az elem ideális/kezdeti mérete a fő tengely mentén (mint a `width` egy sorban). Az `auto` a tartalom méretét használja.
- **`flex-grow`** — ha van *extra* hely, ez az elem milyen mohón nő. `0` = ne nőj; magasabb számok arányosan növekednek.
- **`flex-shrink`** — ha nincs *elegendő* hely, ez az elem milyen könnyen zsugorodik. `0` = soha ne zsugorodyj (túlfolyást okozhat); alapértelmezett `1` = zsugorodyj szükség szerint.

## Arányos növekedés

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

A plusz helyet a növekedési értékek aránya alapján osztják fel, nem az abszolút méretek alapján.

## Gyakori rövidítési értékek

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

A `flex: 1` minden elemen egyenlő oszlopokat hoz létre; a `flex: 0 0 250px` egy merev rögzített szélességű panelt hoz létre a rugalmas mellett.

## Valódi elrendezés: rögzített oldalsáv + folyadék tartalom

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

## Miért fontos

Ez a tulajdonság az, hogyan szabályozza az arányos méretezést flex elrendezésekben — egyenlő oszlopok (`flex: 1`), rögzített-plusz-folyadék panelek (`flex: 0 0 X` + `flex: 1`), és a nem kívánt zsugorodás megakadályozása (`flex-shrink: 0`).

A basis/grow/shrink megértése a Flexbox-ot a "az elemek csak ott vannak" pontról az egyenletes, reaktív vezérlésre alakítja.