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

flex-grow určuje, ako veľmi sa môže prvok zväčšiť pri dostupnom voľnom priestore v kontajneri. Hodnota 0 (predvolená) znamená, že sa prvok nezväčší. Pozitívne hodnoty udávajú koeficient rastu voči ostatným flex prvkom v tom istom riadku.

flex-shrink určuje, ako veľmi sa môže prvok zmenšiť pri nedostatku voľného priestoru v kontajneri. Hodnota 1 (predvolená) znamená, že sa môže zmenšiť. Hodnota 0 zakazuje zmenšenie. Pozitívne hodnoty udávajú koeficient zmenšenia voči ostatným flex prvkom.

Príklad:

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

.container {
  display: flex;
  width: 400px; /* Šírka kontajnera */
}

.item {
  flex-basis: 100px; /* Základná veľkosť každého prvku */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Zaberie 1 diel z voľného priestoru */
  flex-shrink: 0; /* Nebude sa zmenšovať */
}

.item-2 {
  flex-grow: 2; /* Zaberie 2 diely z voľného priestoru */
  flex-shrink: 1; /* Môže sa zmenšiť */
}

.item-3 {
  flex-grow: 1; /* Zaberie 1 diel z voľného priestoru */
  flex-shrink: 1; /* Môže sa zmenšiť */
}

V tomto prípade je celková základná veľkosť prvkov 300px (3 * 100px). Voľný priestor je 100px (400px - 300px). Tento voľný priestor bude rozdelený medzi prvky 1, 2 a 3 v pomere ich flex-grow: 1 + 2 + 1 = 4. Prvok 1 získa 1/4 * 100px = 25px dodatočného priestoru. Prvok 2 získa 2/4 * 100px = 50px dodatočného priestoru. Prvok 3 získa 1/4 * 100px = 25px dodatočného priestoru.

Ich konečné veľkosti budú: Prvok 1: 100px + 25px = 125px Prvok 2: 100px + 50px = 150px Prvok 3: 100px + 25px = 125px

Ak by šírka kontajnera bola nedostatočná (napríklad 200px), bolo by potrebné prvky zmenšiť. Pri nedostatku priestoru na zmenšenie sa zohľadňujú flex-shrink a aktuálna veľkosť prvkov. Chýbajúci priestor sa rozdelí na zmenšenie medzi prvky s flex-shrink väčším ako 0, pomerovo podľa ich flex-shrink a aktuálnej veľkosti (po zohľadnení flex-basis). Algoritmus zmenšenia je zložitejší, ale základná myšlienka je, že prvky s väčším flex-shrink alebo väčšou aktuálnou veľkosťou sa zmenšujú viac.

Je dôležité si uvedomiť, že flex-basis, flex-grow a flex-shrink sa často používajú spolu ako skrátené vlastnosti flex. Napríklad, flex: 1 1 auto; je ekvivalentné s flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Priorita pri rozdeľovaní priestoru:

flex-basis: nastavuje počiatočnú veľkosť prvku.
flex-grow: rozdeľuje kladný voľný priestor.
flex-shrink: rozdeľuje záporný voľný priestor (potreba zmenšenia).

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