Ako môžete flexibilne meniť veľkosti prvkov, ktoré…

Flexbox prvkom môžete flexibilne meniť veľkosti pomocou vlastností flex-grow, flex-shrink a flex-basis.

flex-grow: Určuje, do akej miery sa môže prvok natiahnuť, zaplniac voľný priestor v kontajneri. Predvolená hodnota je 0 (nerastie). Vyššia hodnota znamená väčší koeficient natiahnutia v porovnaní s ostatnými prvkami.
flex-shrink: Určuje, do akej miery sa môže prvok zmenšiť pri nedostatku voľného priestoru. Predvolená hodnota je 1 (zmenšuje sa). Vyššia hodnota znamená väčší koeficient zmenšenia.
flex-basis: Určuje základnú veľkosť prvku pred rozdelením voľného priestoru. Môže byť nastavená ako pevná hodnota (px, %, rem) alebo kľúčové slovo (auto, content).

Tieto tri vlastnosti sa často kombinujú v skrátenej vlastnosti flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Príklady použitia:

/* Prvok zaberie celý dostupný priestor */
.flex-item {
  flex-grow: 1;
}

/* Prvok sa nebude zmenšovať pri nedostatku miesta */
.flex-item {
  flex-shrink: 0;
}

/* Prvok má základnú veľkosť 100px a rozťahuje sa, ak je miesto */
.flex-item {
  flex: 1 1 100px;
}

/* Prvok má základnú veľkosť určenú obsahom a môže sa zmenšiť */
.flex-item {
  flex: 0 1 auto; /* Rovnaké ako `flex: initial;` */
}

/* Prvok sa neroztiahne, nezmenší a má základnú veľkosť určenú obsahom */
.flex-item {
  flex: 0 0 auto; /* Rovnaké ako `flex: none;` */
}

/* Prvok sa rozťahuje, zmenšuje a má základnú veľkosť 0 (užitočné na vytváranie prvkov rovnakej šírky) */
.flex-item {
  flex: 1 1 0; /* Rovnaké ako `flex: auto;` */
}

Použitie týchto vlastností umožňuje presne riadiť správanie prvkov v rámci flex kontajnera pri zmene veľkosti obrazovky alebo obsahu.

Ako môžete flexibilne meniť veľkosti prvkov, ktoré používajú flexbox?