Kaip veikia flex-grow ir flex-shrink savybės…

flex-grow nustato, kaip stipriai elementas gali didėti, kai yra laisvos vietos konteineryje. Reikšmė 0 (numatytoji) reiškia, kad elementas nepadidės. Teigiamos reikšmės nurodo augimo koeficientą, palyginti su kitais flex elementais toje pačioje eilutėje.

flex-shrink nustato, kaip stipriai elementas gali susitraukti, kai trūksta laisvos vietos konteineryje. Reikšmė 1 (numatytoji) reiškia, kad jis gali susitraukti. Reikšmė 0 draudžia susitraukimą. Teigiamos reikšmės nurodo susitraukimo koeficientą, palyginti su kitais flex elementais.

Pavyzdys:

<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; /* Konteinerio plotis */
}

.item {
  flex-basis: 100px; /* Pagrindinis kiekvieno elemento dydis */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Užims 1 dalį laisvos vietos */
  flex-shrink: 0; /* Nesusitrauks */
}

.item-2 {
  flex-grow: 2; /* Užims 2 dalis laisvos vietos */
  flex-shrink: 1; /* Gali susitraukti */
}

.item-3 {
  flex-grow: 1; /* Užims 1 dalį laisvos vietos */
  flex-shrink: 1; /* Gali susitraukti */
}

Šiuo atveju bendras pagrindinių elementų dydis yra 300px (3 * 100px). Laisva vieta yra 100px (400px - 300px). Ši laisva vieta bus paskirstyta tarp elementų pagal jų flex-grow proporciją: 1 + 2 + 1 = 4. Elementas 1 gaus 1/4 * 100px = 25px papildomos vietos. Elementas 2 gaus 2/4 * 100px = 50px papildomos vietos. Elementas 3 gaus 1/4 * 100px = 25px papildomos vietos.

Galutiniai jų dydžiai bus:

Elementas 1: 100px + 25px = 125px
Elementas 2: 100px + 50px = 150px
Elementas 3: 100px + 25px = 125px

Jei konteinerio plotis būtų nepakankamas (pavyzdžiui, 200px), reikėtų sumažinti elementus. Sumažinimo metu atsižvelgiama į flex-shrink ir jų dabartinius dydžius. Trūkstama vieta paskirstoma sumažinimui tarp elementų su flex-shrink didesniu nei 0, proporcingai jų flex-shrink ir dabartiniam dydžiui (po flex-basis įvertinimo). Sumažinimo algoritmas yra sudėtingesnis, tačiau pagrindinė idėja ta, kad elementai su didesniu flex-shrink arba didesniu dabartiniu dydžiu sumažės labiau.

Svarbu atsiminti, kad flex-basis, flex-grow ir flex-shrink dažnai naudojami kartu kaip trumpinys flex. Pavyzdžiui, flex: 1 1 auto; yra lygu flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Skaidymo prioritetas:

flex-basis: nustato pradinį elemento dydį.
flex-grow: paskirsto teigiamą laisvą vietą.
flex-shrink: paskirsto neigiamą laisvą vietą (sumažinimas).

Kaip veikia flex-grow ir flex-shrink savybės?