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

flex-grow ir flex-shrink valdo, kaip flex elementai paskirsto laisvą erdvę flex konteineryje.

flex-grow:

Nustato, kokią dalį laisvos erdvės flex konteineryje užims elementas, jei tokia yra.
Numatyta reikšmė flex-grow: 0, tai reiškia, kad elementas neauga.
Reikšmė yra neigiama skaičius.
Jei keliems elementams yra flex-grow daugiau nei 0, laisva erdvė paskirstoma proporcingai jų flex-grow reikšmėms.

flex-shrink:

Nustato, kiek elementas susitrauks, jei laisvos vietos flex konteineryje yra mažiau nei visų flex elementų bazinių dydžių suma.
Numatyta reikšmė flex-shrink: 1, tai reiškia, kad elementas gali susitraukti.
Reikšmė yra neigiama skaičius.
Kuo didesnė flex-shrink reikšmė, tuo stipriau elementas susitrauks lyginant su kitais elementais, turinčiais mažesnę reikšmę.
Susitraukimo metu atsižvelgiama į elemento bazinį plotį (flex-basis arba width).

Pavyzdys:

.container {
  display: flex;
  width: 500px;
  /* Bendras konteinerio plotis */
}

.item {
  flex-basis: 100px;
  /* Kiekvieno elemento bazinis plotis */
}

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Numatyti reikšmės */
}

.item:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Nesusitrauks */
}

.item:nth-child(3) {
  flex-grow: 0; /* Neaugs */
  flex-shrink: 2; /* Stipriai susitrauks */
}

Jei bazinių plotių suma (300px) yra mažesnė už konteinerio plotį (500px), likusi erdvė (200px) paskirstys pirmam ir antram elementui santykiu flex-grow 1:2.

Jei bazinių plotių suma yra didesnė už konteinerio plotį, elementai susitrauks pagal jų flex-shrink reikšmes ir bazinius dydžius. Elementas su flex-shrink: 0 nesusitrauks.

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