Kā darbojas flex-grow un flex-shrink īpašības…

flex-grow un flex-shrink nosaka, kā flex elementi sadala brīvo telpu flex konteinerī.

flex-grow:

Nosaka, cik daļu no pieejamās brīvās telpas flex konteinerī aizņems elements, ja tāda ir.
Noklusējuma vērtība ir flex-grow: 0, kas nozīmē, ka elements neaug.
Vērtība ir nenegatīvs skaitlis.
Ja vairākām elementiem ir flex-grow lielāks par 0, brīvā telpa tiek sadalīta proporcionāli to flex-grow vērtībām.

flex-shrink:

Nosaka, cik ļoti elements samazināsies, ja pieejamā telpa flex konteinerī ir mazāka par visu flex elementu bāzes izmēru summu.
Noklusējuma vērtība ir flex-shrink: 1, kas nozīmē, ka elements var samazināties.
Vērtība ir nenegatīvs skaitlis.
Jo lielāka ir flex-shrink vērtība, jo stiprāk elements samazināsies salīdzinājumā ar citiem elementiem ar mazāku vērtību.
Samazināšanas laikā ņem vērā elementa bāzes platumu (flex-basis vai width).

Piemērs:

.container {
  display: flex;
  width: 500px;
  /* Kopējais konteineru platums */
}

.item {
  flex-basis: 100px;
  /* Katra elementa bāzes platums */
}

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Noklusējuma vērtības */
}

.item:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Nesamazinās */
}

.item:nth-child(3) {
  flex-grow: 0; /* Neaudzs */
  flex-shrink: 2; /* Stipri samazinās */
}

Ja bāzes platumu summa (300px) ir mazāka par konteineru platumu (500px), atlikusī telpa (200px) tiks sadalīta starp pirmo un otro elementu proporcionāli flex-grow 1:2 attiecībai.

Ja bāzes platumu summa ir lielāka par konteineru platumu, elementi samazināsies atbilstoši to flex-shrink vērtībām un to bāzes izmēriem. Elements ar flex-shrink: 0 nesamazināsies.

Kā darbojas flex-grow un flex-shrink īpašības?