Kuidas toimivad flex-grow ja flex-shrink omadused…

flex-grow määrab, kui palju võib element suureneda, kui konteineris on vaba ruumi. Väärtus 0 (vaikimisi) tähendab, et element ei suurene. Positiivsed väärtused näitavad kasvumäära teiste flex elementide suhtes samas reas.

flex-shrink määrab, kui palju võib element kokku tõmbuda, kui ruumi on vähe. Väärtus 1 (vaikimisi) tähendab, et see võib kokku tõmbuda. Väärtus 0 keelab tõmbamise. Positiivsed väärtused näitavad kokku tõmbamise koefitsienti teiste flex elementide suhtes.

Näide:

<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; /* Kontseni laiuse */
}

.item {
  flex-basis: 100px; /* Iga elemendi algsuurus */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Võtab 1 osa vaba ruumi */
  flex-shrink: 0; /* Ei tõmbu kokku */
}

.item-2 {
  flex-grow: 2; /* Võtab 2 osa vaba ruumi */
  flex-shrink: 1; /* Võib kokku tõmbuda */
}

.item-3 {
  flex-grow: 1; /* Võtab 1 osa vaba ruumi */
  flex-shrink: 1; /* Võib kokku tõmbuda */
}

Selles näites on elementide kogupikkus algselt 300px (3 * 100px). Vaba ruum on 100px (400px - 300px). See vaba ruum jaguneb flex-grow suhtega: 1 + 2 + 1 = 4. Element 1 saab 1/4 * 100px = 25px lisaruumi. Element 2 saab 2/4 * 100px = 50px lisaruumi. Element 3 saab 1/4 * 100px = 25px lisaruumi.

Nende lõplikud suurused on:

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

Kui konteineri laius oleks ebapiisav (näiteks 200px), siis tuleb elemente vähendada. Vähendamise ajal arvestatakse flex-shrink ja nende praeguseid suurusi. Puuduv ruum jaotatakse flex-shrink väärtuse järgi, proportsionaalselt nende flex-shrink ja praeguse suurusega (pärast flex-basis arvestamist). Vähendamise algoritm on keerulisem, kuid põhimõte on see, et suurema flex-shrink või suurema praeguse suurusega elemendid vähenevad rohkem.

Oluline on meeles pidada, et flex-basis, flex-grow ja flex-shrink kasutatakse sageli koos lühendatud flex omadusena. Näiteks, flex: 1 1 auto; on võrdne flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Ruumijaotuse prioriteet:

flex-basis: määrab elemendi algsuuruse.
flex-grow: jagab positiivset vaba ruumi.
flex-shrink: jagab negatiivset vaba ruumi (vähendamine).

Kuidas toimivad flex-grow ja flex-shrink omadused?