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

flex-grow și flex-shrink controlează modul în care elementele flex distribuie spațiul liber din interiorul containerului flex.

flex-grow:

Determină ce parte din spațiul liber disponibil în containerul flex va ocupa elementul, dacă există spațiu liber.
În mod implicit flex-grow: 0, ceea ce înseamnă că elementul nu crește.
Valoare - număr non-negativ.
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.

flex-shrink:

Determină cât de mult se va comprima elementul dacă spațiul disponibil în containerul flex este mai mic decât suma dimensiunilor de bază ale tuturor elementelor flex.
În mod implicit flex-shrink: 1, ceea ce înseamnă că elementul poate fi comprimat.
Valoare - număr non-negativ.
Cu cât valoarea flex-shrink este mai mare, cu atât mai mult se va comprima elementul în comparație cu celelalte elemente cu valoare mai mică.
La comprimare, se ia în considerare lățimea de bază a elementului (flex-basis sau width).

Exemplu:

.contenitor {
  display: flex;
  width: 500px;
  /* Lățimea totală a containerului */
}

.element {
  flex-basis: 100px;
  /* Lățimea de bază a fiecărui element */
}

.element:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Valori implicite */
}

.element:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Nu se comprimă */
}

.element:nth-child(3) {
  flex-grow: 0; /* Nu crește */
  flex-shrink: 2; /* Se comprimă mai mult */
}

Dacă suma lățimilor de bază (300px) este mai mică decât lățimea containerului (500px), spațiul rămas (200px) va fi distribuit între primul și al doilea element în raportul flex-grow 1:2.

Dacă suma lățimilor de bază depășește lățimea containerului, elementele se vor comprima conform valorilor flex-shrink și dimensiunilor lor de bază. Elementul cu flex-shrink: 0 nu se va comprima.

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