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

flex-grow un flex-shrink nosaka, kā elementi adaptīvi maina savu izmēru flex konteinerī, kad būtu brīva vieta vai trūkst vietas attiecīgi.

flex-grow - nosaka koeficientu, pēc kura elements palielinās, ja konteinerā ir brīva vieta. Noklusējuma vērtība - 0 (elements neizplešas). Ja vairākiem elementiem ir flex-grow lielāks par 0, brīvā vieta tiek sadalīta proporcionāli to flex-grow vērtībām.

.item {
  flex-grow: 1; /* Elements izmantos visu pieejamo brīvo vietu */
}

flex-shrink - nosaka koeficientu, pēc kura elements samazinās, ja trūkst vietas konteinerā. Noklusējuma vērtība - 1 (elements samazinās proporcionāli citiem samazināmajiem elementiem). Vērtība 0 novērš elementa samazināšanu.

.item {
  flex-shrink: 0; /* Elements nesamazinās */
}

Kopā ar flex-basis tie veido saīsinātu īpašību flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Piemērs:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

.container {
  display: flex;
  width: 400px; /* Piemērs ar fiksētu konteineru platumu */
}

.item {
  flex-basis: 100px; /* Visu elementu bāzes izmērs */
}

.item-1 {
  flex-grow: 1; /* Item 1 izmantos brīvo vietu */
}

.item-2 {
  flex-shrink: 0; /* Item 2 nesamazinās */
}

Ja konteineris ir platāks par 200px (100px + 100px), item-1 aizņems visu brīvo vietu. Ja konteineris ir tieši 200px, item-2 saglabās savu bāzes izmēru 100px, bet item-1 samazināsies.