Come funzionano le proprietà flex-grow e flex-shrink…

flex-grow e flex-shrink controllano come gli elementi flex distribuiscono lo spazio libero all'interno del contenitore flex.

flex-grow:

Determina quale parte dello spazio libero disponibile nel contenitore flex occuperà l'elemento, se c'è spazio libero.
Per impostazione predefinita flex-grow: 0, il che significa che l'elemento non cresce.
Valore - numero non negativo.
Se più elementi hanno flex-grow maggiore di 0, lo spazio libero viene distribuito tra loro in proporzione ai loro valori di flex-grow.

flex-shrink:

Determina quanto l'elemento si comprimerà se lo spazio disponibile nel contenitore flex è inferiore alla somma delle dimensioni di base di tutti gli elementi flex.
Per impostazione predefinita flex-shrink: 1, il che significa che l'elemento può comprimersi.
Valore - numero non negativo.
Più alto è il valore di flex-shrink, più l'elemento si comprimerà rispetto agli altri con valori inferiori.
Durante la compressione, si considera la larghezza di base dell'elemento (flex-basis o width).

Esempio:

.contenitore {
  display: flex;
  width: 500px;
  /* Larghezza totale del contenitore */
}

.elemento {
  flex-basis: 100px;
  /* Larghezza di base di ogni elemento */
}

.elemento:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Valori di default */
}

.elemento:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Non si comprime */
}

.elemento:nth-child(3) {
  flex-grow: 0; /* Non cresce */
  flex-shrink: 2; /* Si comprime di più */
}

Se la somma delle larghezze di base (300px) è inferiore alla larghezza del contenitore (500px), lo spazio rimanente (200px) verrà distribuito tra il primo e il secondo elemento in proporzione 1:2.

Se la somma delle larghezze di base supera la larghezza del contenitore, gli elementi si comprimeranno in base ai loro valori di flex-shrink e alle loro dimensioni di base. L'elemento con flex-shrink: 0 non si comprimerà.

Come funzionano le proprietà flex-grow e flex-shrink?