Kuidas toimivad flex-grow ja flex-shrink omadused…

flex-grow ja flex-shrink määravad, kuidas flex-elemendid jagavad vaba ruumi flex-konteineris.

flex-grow:

Määrab, kui suure osa vabast ruumist võtab element, kui see on olemas.
Vaikimisi väärtus on flex-grow: 0, mis tähendab, et element ei kasva.
Väärtus on mitte-negatiivne arv.
Kui mitmel elemendil on flex-grow suurem kui 0, jaguneb vaba ruum nende vahel proportsionaalselt nende flex-grow väärtuste järgi.

flex-shrink:

Määrab, kui palju element kokku tõmbub, kui vaba ruumi flex-konteineris on vähem kui kõigi flex-elemendide põhimõõtude summa.
Vaikimisi väärtus on flex-shrink: 1, mis tähendab, et element võib kokku tõmbuda.
Väärtus on mitte-negatiivne arv.
Mida suurem on flex-shrink väärtus, seda tugevamalt element kokku tõmbub võrreldes teiste väiksema väärtusega elementidega.
Tõmbumise ajal arvestatakse elemendi põhilaidet (flex-basis või width).

Näide:

.container {
  display: flex;
  width: 500px;
  /* Kontaineri kogulaius */
}

.item {
  flex-basis: 100px;
  /* Iga elemendi põhilaid */
}

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Vaikimisi väärtused */
}

.item:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Ei tõmbu kokku */
}

.item:nth-child(3) {
  flex-grow: 0; /* Ei kasva */
  flex-shrink: 2; /* Tõmbub tugevamini kokku */
}

Kui põhilaidude summa (300px) on väiksem kui konteineri laius (500px), jaguneb ülejäänud ruum (200px) esimese ja teise elemendi vahel suhtega flex-grow 1:2.

Kui põhilaidude summa on suurem kui konteineri laius, tõmbuvad elemendid vastavalt nende flex-shrink väärtustele ja nende põhimõõtudele. Element, millel on flex-shrink: 0, ei tõmbu kokku.

Kuidas toimivad flex-grow ja flex-shrink omadused?