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

flex-grow ir flex-shrink nustato, kaip elementai adaptuojamai keičia savo dydį flex konteineryje, kai yra laisvos vietos arba trūksta vietos atitinkamai.

flex-grow - nustato koeficientą, pagal kurį elementas turėtų didėti, kai konteineryje yra laisvos vietos. Numatytoji reikšmė - 0 (elementas neplečiasi). Jei keliems elementams flex-grow yra didesnis nei 0, laisva vieta paskirstoma proporcingai jų flex-grow reikšmėms.

.item {
  flex-grow: 1; /* Elementas naudos visą prieinamą laisvą vietą */
}

flex-shrink - nustato koeficientą, pagal kurį elementas turėtų susitraukti, kai trūksta vietos konteineryje. Numatytoji reikšmė - 1 (elementas susitraukia proporcingai kitiems susitraukiantiems elementams). Reikšmė 0 apsaugo nuo susitraukimo.

.item {
  flex-shrink: 0; /* Elementas nesusitrauks */
}

Kartu su flex-basis jie sudaro sutrumpintą flex savybę: flex: <flex-grow> <flex-shrink> <flex-basis>.

Pavyzdys:

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

.container {
  display: flex;
  width: 400px; /* Pavyzdinė fiksuoto pločio konteinerio reikšmė */
}

.item {
  flex-basis: 100px; /* Visų elementų bazinis dydis */
}

.item-1 {
  flex-grow: 1; /* Item 1 naudosis laisva vieta */
}

.item-2 {
  flex-shrink: 0; /* Item 2 nesusitrauks */
}

Jei konteinerio plotis yra didesnis nei 200px (100px + 100px), item-1 užims likusią laisvą vietą. Jei konteineris yra jau 200px, item-2 išsaugos savo bazinį dydį 100px, o item-1 susitrauks.