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

flex-grow e flex-shrink determinano come gli elementi si adattano in modo reattivo all’interno del contenitore flex, quando c’è spazio libero o insufficiente, rispettivamente.

flex-grow - determina il coefficiente con cui un elemento deve aumentare quando c’è spazio libero nel contenitore. Il valore predefinito è 0 (l’elemento non si espande). Se più elementi hanno flex-grow maggiore di 0, lo spazio libero viene distribuito tra loro in proporzione ai loro valori di flex-grow.

.item {
  flex-grow: 1; /* L’elemento utilizzerà tutto lo spazio libero disponibile */
}

flex-shrink - determina il coefficiente con cui un elemento deve comprimersi quando c’è spazio insufficiente nel contenitore. Il valore predefinito è 1 (l’elemento si comprime proporzionalmente agli altri elementi che si comprimono). Un valore di 0 impedisce la compressione dell’elemento.

.item {
  flex-shrink: 0; /* L’elemento non si comprimerà */
}

Insieme a flex-basis, formano la proprietà abbreviata flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Esempio di utilizzo:

<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; /* Esempio di larghezza fissa del contenitore */
}

.item {
  flex-basis: 100px; /* Dimensione di base di tutti gli elementi */
}

.item-1 {
  flex-grow: 1; /* Item 1 utilizzerà lo spazio libero */
}

.item-2 {
  flex-shrink: 0; /* Item 2 non si comprimerà */
}

Se il contenitore è più largo di 200px (100px + 100px), item-1 occuperà tutto lo spazio libero rimanente. Se il contenitore è già di 200px, item-2 manterrà la sua dimensione di base di 100px, e item-1 si comprimerà.