Ako fungujú vlastnosti flex-grow a flex-shrink?

flex-grow a flex-shrink určujú, ako sa prvky prispôsobujú veľkosti v rámci flex kontajnera, prípadne keď je voľného miesta alebo je ho nedostatok.

flex-grow - určuje koeficient, podľa ktorého by mal prvok rásť, keď je v kontajneri voľné miesto. Predvolená hodnota je 0 (prvok sa neťahá). Ak má viac prvkov flex-grow väčšie ako 0, voľné miesto sa rozdeľuje medzi ne proporcionálne podľa ich hodnôt flex-grow.

.item {
  flex-grow: 1; /* Prvok využije všetko dostupné voľné miesto */
}

flex-shrink - určuje koeficient, podľa ktorého by sa mal prvok zmenšovať, keď v kontajneri nie je dostatok miesta. Predvolená hodnota je 1 (prvok sa zmenšuje proporcionálne s ostatnými zmenšujúcimi sa prvkami). Hodnota 0 zabraňuje zmenšovaniu prvku.

.item {
  flex-shrink: 0; /* Prvok sa nezmenší */
}

Spolu s flex-basis tvoria skrátenú vlastnosť flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Príklad použitia:

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

.container {
  display: flex;
  width: 400px; /* Príklad pevnej šírky kontajnera */
}

.item {
  flex-basis: 100px; /* Základná veľkosť všetkých prvkov */
}

.item-1 {
  flex-grow: 1; /* Item 1 využije voľný priestor */
}

.item-2 {
  flex-shrink: 0; /* Item 2 sa nezmenší */
}

Ak je kontajner širší ako 200px (100px + 100px), item-1 zaberie všetok zostávajúci voľný priestor. Ak je už 200px, item-2 si zachová svoju základnú veľkosť 100px a item-1 sa zmenší.