Kuidas töötavad flex-grow ja flex-shrink omadused?

flex-grow ja flex-shrink määravad, kuidas elemendid kohanduvad oma suurusega flex-konteineris, kui on vaba ruumi või ruumi vähe.

flex-grow - määrab koefitsiendi, mille järgi element suurenevad, kui konteineris on vaba ruumi. Vaikimisi väärtus on 0 (element ei laiene). Kui mitmel elemendil on flex-grow suurem kui 0, jaguneb vaba ruum nende vahel proportsionaalselt nende flex-grow väärtustega.

.item {
  flex-grow: 1; /* Element kasutab kogu saadaval oleva vaba ruumi */
}

flex-shrink - määrab koefitsiendi, mille järgi element väheneb, kui ruumi on vähe. Vaikimisi väärtus on 1 (element väheneb proportsionaalselt teiste vähenenud elementidega). Väärtus 0 takistab elemendi vähenemist.

.item {
  flex-shrink: 0; /* Element ei väheneda */
}

Koos flex-basis-ga moodustavad nad lühendatud omaduse flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Näide:

<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; /* Näide fikseeritud konteineri laiusega */
}

.item {
  flex-basis: 100px; /* Kõigi elementide baas suurus */
}

.item-1 {
  flex-grow: 1; /* Item 1 kasutab vaba ruumi */
}

.item-2 {
  flex-shrink: 0; /* Item 2 ei väheneda */
}

Kui konteiner on laiem kui 200px (100px + 100px), võtab item-1 kogu ülejäänud vaba ruumi. Kui konteiner on juba 200px, säilitab item-2 oma baas suuruse 100px ning item-1 väheneb.