Kaip galima lankstiai keisti elementų, naudojančių…

Flexbox elementų dydžių lankstus keitimas gali būti pasiektas naudojant flex-grow, flex-shrink ir flex-basis savybes.

flex-grow: Nustato, kiek elementas gali išsiplėsti, užimdami laisvą erdvę konteineryje. Numatytoji reikšmė yra 0 (neplėsis). Aukštesnė reikšmė reiškia didesnį išsiplėtimo koeficientą lyginant su kitais elementais.
flex-shrink: Nustato, kiek elementas gali susitraukti, kai trūksta laisvos vietos. Numatytoji reikšmė yra 1 (susitraukia). Aukštesnė reikšmė reiškia didesnį susitraukimo koeficientą.
flex-basis: Nustato bazinį elemento dydį prieš paskirstant laisvą erdvę. Gali būti nustatytas kaip fiksuotas dydis (px, %, rem) arba raktažodis (auto, content).

Šios trys savybės dažnai naudojamos trumpiniu flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Pavyzdžiai:

/* Elementas užims visą prieinamą erdvę */
.flex-item {
  flex-grow: 1;
}

/* Elementas nesusitrauks, jei vietos trūksta */
.flex-item {
  flex-shrink: 0;
}

/* Elemento bazinis dydis 100px, ir jis išsiplės, jei yra vietos */
.flex-item {
  flex: 1 1 100px;
}

/* Elemento bazinis dydis nustatytas pagal turinį, ir jis gali susitraukti */
.flex-item {
  flex: 0 1 auto; /* lygu `initial` */
}

/* Elementas nesiplečia, nesusitraukia ir turi bazinį dydį pagal turinį */
.flex-item {
  flex: 0 0 auto; /* lygu `none` */
}

/* Elementas išsiplės, susitrauks ir turi bazinį dydį 0 (patogu kurti vienodo pločio elementus) */
.flex-item {
  flex: 1 1 0; /* lygu `auto` */
}

Šių savybių naudojimas leidžia tiksliai valdyti elementų elgesį flex konteineryje keičiant ekrano ar turinio dydį.

Kaip galima lankstiai keisti elementų, naudojančių flexbox, dydžius?