Cum funcționează proprietățile flex-grow și flex-shrink?

flex-grow și flex-shrink determină modul în care elementele își ajustează dimensiunea în mod adaptiv în interiorul containerului flex, respectiv atunci când există spațiu liber sau insuficient.

flex-grow - determină coeficientul după care un element trebuie să crească atunci când există spațiu liber în container. Valoarea implicită este 0 (elementul nu se întinde). Dacă mai multe elemente au flex-grow mai mare decât 0, spațiul liber este distribuit între ele proporțional cu valorile flex-grow.

.item {
  flex-grow: 1; /* Elementul va folosi tot spațiul liber disponibil */
}

flex-shrink - determină coeficientul după care un element trebuie să se comprime atunci când spațiul din container este insuficient. Valoarea implicită este 1 (elementul se comprimă proporțional cu celelalte elemente care se comprimă). O valoare de 0 împiedică comprimarea elementului.

.item {
  flex-shrink: 0; /* Elementul nu se va comprima */
}

Împreună cu flex-basis, formează proprietatea scurtă flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Exemplu de utilizare:

<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; /* Exemplu de lățime fixă a containerului */
}

.item {
  flex-basis: 100px; /* Dimensiunea de bază a tuturor elementelor */
}

.item-1 {
  flex-grow: 1; /* Item 1 va folosi spațiul liber */
}

.item-2 {
  flex-shrink: 0; /* Item 2 nu se va comprima */
}

Dacă containerul este mai lat decât 200px (100px + 100px), item-1 va ocupa tot spațiul liber rămas. Dacă containerul are deja 200px, item-2 își va păstra dimensiunea de bază de 100px, iar item-1 se va comprima.