Jak lze flexibilně měnit velikosti prvků…

Flexbox elementům lze flexibilně měnit velikost pomocí vlastností flex-grow, flex-shrink a flex-basis.

flex-grow: Určuje, do jaké míry se může prvek roztáhnout, zabírajíc volný prostor v kontejneru. Výchozí hodnota je 0 (neroste). Vyšší hodnota znamená větší koeficient roztahování ve srovnání s ostatními prvky.
flex-shrink: Určuje, do jaké míry se může prvek zmenšit při nedostatku volného prostoru. Výchozí hodnota je 1 (zmenšuje se). Vyšší hodnota znamená větší koeficient zmenšení.
flex-basis: Určuje základní velikost prvku před rozdělením volného prostoru. Může být nastavena jako pevná hodnota (px, %, rem) nebo klíčové slovo (auto, content).

Tyto tři vlastnosti se často kombinují ve zkrácené vlastnosti flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Příklady použití:

/* Prvek zabere veškerý dostupný prostor */
.flex-item {
  flex-grow: 1;
}

/* Prvek se nebude zmenšovat při nedostatku místa */
.flex-item {
  flex-shrink: 0;
}

/* Prvek má základní velikost 100px a roztahuje se, pokud je místo */
.flex-item {
  flex: 1 1 100px;
}

/* Prvek má základní velikost určenou obsahem a může se zmenšit */
.flex-item {
  flex: 0 1 auto; /* Ekvivalentní s `flex: initial;` */
}

/* Prvek se ne roztahuje, ne zmenšuje a má základní velikost určenou obsahem */
.flex-item {
  flex: 0 0 auto; /* Ekvivalentní s `flex: none;` */
}

/* Prvek se roztahuje, zmenšuje a má základní velikost 0 (užitečné pro vytváření prvků stejné šířky) */
.flex-item {
  flex: 1 1 0; /* Ekvivalentní s `flex: auto;` */
}

Použití těchto vlastností umožňuje přesně řídit chování prvků uvnitř flex kontejneru při změně velikosti obrazovky nebo obsahu.

Jak lze flexibilně měnit velikosti prvků používajících flexbox?