Jak fungují vlastnosti flex-grow a flex-shrink?

flex-grow a flex-shrink určují, jak se prvky přizpůsobují velikosti uvnitř flex kontejneru, resp. když je volného místa nebo je ho nedostatek.

flex-grow - určuje koeficient, podle kterého by měl prvek růst, když je v kontejneru volné místo. Výchozí hodnota je 0 (prvek se neroztahuje). Pokud má více prvků flex-grow větší než 0, volné místo se rozděluje mezi ně poměrně podle jejich hodnot flex-grow.

.item {
  flex-grow: 1; /* Prvek využije veškeré dostupné volné místo */
}

flex-shrink - určuje koeficient, podle kterého by se měl prvek zmenšovat, když je v kontejneru nedostatek místa. Výchozí hodnota je 1 (prvek se zmenšuje poměrně s ostatními zmenšujícími se prvky). Hodnota 0 zabraňuje zmenšení prvku.

.item {
  flex-shrink: 0; /* Prvek se nezmenší */
}

Společně s flex-basis tvoří zkrácenou vlastnost flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Příklad použití:

<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; /* Příklad pevné šířky kontejneru */
}

.item {
  flex-basis: 100px; /* Základní velikost všech prvků */
}

.item-1 {
  flex-grow: 1; /* Item 1 využije volný prostor */
}

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

Pokud je kontejner širší než 200px (100px + 100px), item-1 zabere veškerý zbývající volný prostor. Pokud je kontejner již 200px, item-2 si zachová základní velikost 100px a item-1 se zmenší.