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

flex-grow určuje, jak mocně se prvek může zvětšovat při dostupném volném prostoru v kontejneru. Hodnota 0 (výchozí) znamená, že se prvek nezvětší. Kladné hodnoty udávají koeficient růstu vzhledem k ostatním flex prvkům ve stejném řádku.

flex-shrink určuje, jak moc se prvek může zmenšit při nedostatku volného prostoru v kontejneru. Hodnota 1 (výchozí) znamená, že se může zmenšit. Hodnota 0 zakazuje zmenšení. Kladné hodnoty udávají koeficient zmenšení vzhledem k ostatním flex prvkům.

Pří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; /* Šířka kontejneru */
}

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

.item-1 {
  flex-grow: 1; /* Zabere 1 díl z volného prostoru */
  flex-shrink: 0; /* Nebude se zmenšovat */
}

.item-2 {
  flex-grow: 2; /* Zabere 2 díly z volného prostoru */
  flex-shrink: 1; /* Může se zmenšit */
}

.item-3 {
  flex-grow: 1; /* Zabere 1 díl z volného prostoru */
  flex-shrink: 1; /* Může se zmenšit */
}

V tomto případě je celková základní velikost prvků 300px (3 * 100px). Volný prostor je 100px (400px - 300px). Tento volný prostor bude rozdělen mezi prvky 1, 2 a 3 v poměru jejich flex-grow: 1 + 2 + 1 = 4. Prvek 1 obdrží 1/4 * 100px = 25px dodatečného prostoru. Prvek 2 obdrží 2/4 * 100px = 50px dodatečného prostoru. Prvek 3 obdrží 1/4 * 100px = 25px dodatečného prostoru.

Jejich konečné velikosti budou: Prvek 1: 100px + 25px = 125px Prvek 2: 100px + 50px = 150px Prvek 3: 100px + 25px = 125px

Pokud by šířka kontejneru byla nedostatečná (například 200px), bylo by nutné prvky zmenšit. Při nedostatku prostoru pro zmenšení se zohledňují flex-shrink a aktuální velikost prvků. Chybějící prostor se rozdělí na zmenšení mezi prvky s flex-shrink větším než 0, poměrově podle jejich flex-shrink a aktuální velikosti (po zohlednění flex-basis). Algoritmus zmenšení je složitější, ale základní myšlenka je, že prvky s větším flex-shrink nebo větší aktuální velikostí se zmenšují více.

Je důležité si uvědomit, že flex-basis, flex-grow a flex-shrink jsou často používány společně jako zkrácené vlastnosti flex. Například flex: 1 1 auto; je ekvivalentní s flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Priorita při rozdělování prostoru:

flex-basis: nastavuje počáteční velikost prvku.
flex-grow: rozděluje kladný volný prostor.
flex-shrink: rozděluje záporný volný prostor (potřeba zmenšení).

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