Kā elastīgi mainīt elementu, kas izmanto flexbox…

Flexbox elementu izmēru elastīga mainīšana ir iespējama ar flex-grow, flex-shrink un flex-basis īpašībām.

flex-grow: Nosaka, cik ļoti elements var izstiepties, aizņemot brīvo vietu konteinerā. Noklusējuma vērtība ir 0 (neizstiepsies). Augstāka vērtība nozīmē lielāku izstiepšanās koeficientu salīdzinājumā ar citiem elementiem.
flex-shrink: Nosaka, cik ļoti elements var sarukt, ja ir mazāk brīvas vietas. Noklusējuma vērtība ir 1 (saruks). Augstāka vērtība nozīmē lielāku sarukšanas koeficientu.
flex-basis: Nosaka elementa sākotnējo izmēru pirms brīvās vietas sadales. To var iestatīt kā fiksētu vērtību (px, %, rem) vai atslēgas vārdu (auto, content).

Šīs trīs īpašības bieži tiek izmantotas kopā ar īso flex īpašību: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Piemēri:

/* Elements aizņems visu pieejamo vietu */
.flex-item {
  flex-grow: 1;
}

/* Elements nesaruks, ja vietas trūkst */
.flex-item {
  flex-shrink: 0;
}

/* Elements sākotnējais izmērs ir 100px, un tas paplašinās, ja ir vieta */
.flex-item {
  flex: 1 1 100px;
}

/* Elements sākotnējais izmērs ir atkarīgs no satura, un tas var sarukt */
.flex-item {
  flex: 0 1 auto; /* līdzvērtīgi `initial` */
}

/* Elements nesarauks, nesamazinās un sākotnējais izmērs ir atkarīgs no satura */
.flex-item {
  flex: 0 0 auto; /* līdzvērtīgi `none` */
}

/* Elements paplašinās, saruks un sākotnējais izmērs ir 0 (ērti vienādas platuma elementu izveidei) */
.flex-item {
  flex: 1 1 0; /* līdzvērtīgi `auto` */
}

Šo īpašību izmantošana ļauj precīzi kontrolēt elementu uzvedību flex konteinerī, mainoties ekrāna vai satura izmēram.

Kā elastīgi mainīt elementu, kas izmanto flexbox, izmērus?