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

flex-grow a flex-shrink řídí, jak flex položky rozdělují volný prostor uvnitř flex kontejneru.

flex-grow:

Určuje, jakou část dostupného volného prostoru v flex kontejneru zaujme prvek, pokud je volný prostor.
Výchozí hodnota flex-grow: 0, což znamená, že prvek neporoste.
Hodnota - nezáporné číslo.
Pokud má více prvků flex-grow větší než 0, volný prostor je rozdělen mezi ně poměrem jejich hodnot flex-grow.

flex-shrink:

Určuje, jak moc se prvek zmenší, pokud je dostupný prostor v flex kontejneru menší než součet základních velikostí všech flex prvků.
Výchozí hodnota flex-shrink: 1, což znamená, že prvek se může zmenšit.
Hodnota - nezáporné číslo.
Čím větší je flex-shrink, tím více se prvek zmenší ve srovnání s ostatními prvky s menší hodnotou.
Při zmenšení se bere v úvahu základní šířka prvku (flex-basis nebo width).

Příklad:

.kontejner {
  display: flex;
  width: 500px;
  /* Celková šířka kontejneru */
}

.prvek {
  flex-basis: 100px;
  /* Základní šířka každého prvku */
}

.prvek:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Výchozí hodnoty */
}

.prvek:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Nezmenší se */
}

.prvek:nth-child(3) {
  flex-grow: 0; /* Nezvětšuje se */
  flex-shrink: 2; /* Zmenší se více */
}

Pokud součet základních šířek (300px) je menší než šířka kontejneru (500px), zbylý prostor (200px) bude rozdělen mezi první a druhý prvek v poměru flex-grow 1:2.

Pokud součet základních šířek přesáhne šířku kontejneru, prvky se zmenší podle jejich hodnot flex-shrink a jejich základních velikostí. Prvek s flex-shrink: 0 se nezmenší.

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