Hogyan működnek a flex-grow és flex-shrink tulajdonságok?

A flex-grow meghatározza, hogy az elem milyen mértékben növekedhet a szabad hely rendelkezésre állásakor a konténerben. Az érték 0 (alapértelmezett) azt jelenti, hogy az elem nem fog növekedni. Pozitív értékek a növekedési tényezőt jelzik a többi flex-elemhez képest ugyanabban a sorban.

A flex-shrink meghatározza, hogy az elem milyen mértékben szűkíthető a szabad hely hiányában a konténerben. Az érték 1 (alapértelmezett) azt jelenti, hogy az elem szűkíthető. Az érték 0 megakadályozza a szűkítést. Pozitív értékek a szűkítési tényezőt jelzik a többi flex-elemhez képest.

Vegyünk egy példát:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* A konténer szélessége */
}

.item {
  flex-basis: 100px; /* Az egyes elemek alapmérete */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* A szabad hely 1 részét fogja elfoglalni */
  flex-shrink: 0; /* Nem fog szűkülni */
}

.item-2 {
  flex-grow: 2; /* A szabad hely 2 részét foglalja el */
  flex-shrink: 1; /* Szűkíthető */
}

.item-3 {
  flex-grow: 1; /* A szabad hely 1 részét foglalja el */
  flex-shrink: 1; /* Szűkíthető */
}

Ebben az esetben az elemek össz alapmérete 300px (3 * 100px). A szabad hely 100px (400px - 300px). Ez a szabad hely az elemek között oszlik szét a flex-grow arányában: 1 + 2 + 1 = 4. Az 1. elem kap 1/4 * 100px = 25px plusz helyet. A 2. elem kap 2/4 * 100px = 50px plusz helyet. A 3. elem kap 1/4 * 100px = 25px plusz helyet.

Az összes méretük így lesz:

1. elem: 100px + 25px = 125px
2. elem: 100px + 50px = 150px
3. elem: 100px + 25px = 125px

Ha a konténer szélessége nem lenne elegendő (például 200px), akkor a szűkítés szükségessé válik. A szűkítéshez figyelembe veszik a flex-shrink értékét és az aktuális méretet (a flex-basis figyelembevételével). A hiányzó helyet a szűkítéshez osztják szét a flex-shrink érték szerint, arányosan az aktuális méretükhöz. A szűkítés algoritmusa bonyolultabb, de az alapötlet az, hogy a nagyobb flex-shrink értékű vagy nagyobb aktuális méretű elemek szűkülnek jobban.

Fontos megjegyezni, hogy a flex-basis, flex-grow és flex-shrink gyakran együtt használatos rövidített flex tulajdonságként. Például, a flex: 1 1 auto; egyenértékű a flex-grow: 1; flex-shrink: 1; flex-basis: auto;-val.

A rendelkezésre álló hely felosztásának prioritásai:

1. flex-basis: az elem kezdeti méretét határozza meg.
2. flex-grow: a pozitív szabad helyet osztja szét.
3. flex-shrink: a negatív szabad helyet osztja szét (szűkítés szükségessége).