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

flex-grow determina quanto un elemento può aumentare quando c'è spazio libero nel contenitore. Un valore di 0 (predefinito) significa che l'elemento non crescerà. Valori positivi indicano il coefficiente di crescita rispetto agli altri elementi flex sulla stessa riga.

flex-shrink determina quanto un elemento può ridursi in caso di mancanza di spazio libero nel contenitore. Un valore di 1 (predefinito) significa che può ridursi. Un valore di 0 proibisce la riduzione. Valori positivi indicano il coefficiente di riduzione rispetto agli altri elementi flex.

Vediamo un esempio:

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

.container {
  display: flex;
  width: 400px; /* Larghezza del contenitore */
}

.item {
  flex-basis: 100px; /* Dimensione di base di ogni elemento */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Occuperà 1 parte dello spazio libero */
  flex-shrink: 0; /* Non si ridurrà */
}

.item-2 {
  flex-grow: 2; /* Occuperà 2 parti dello spazio libero */
  flex-shrink: 1; /* Può ridursi */
}

.item-3 {
  flex-grow: 1; /* Occuperà 1 parte dello spazio libero */
  flex-shrink: 1; /* Può ridursi */
}

In questo caso, la dimensione totale di base degli elementi è di 300px (3 * 100px). Lo spazio libero è di 100px (400px - 300px). Questo spazio sarà distribuito tra gli elementi 1, 2 e 3 in proporzione ai loro flex-grow: 1 + 2 + 1 = 4. L'elemento 1 riceverà 1/4 * 100px = 25px di spazio aggiuntivo. L'elemento 2 riceverà 2/4 * 100px = 50px di spazio aggiuntivo. L'elemento 3 riceverà 1/4 * 100px = 25px di spazio aggiuntivo.

Le dimensioni finali saranno: Elemento 1: 100px + 25px = 125px Elemento 2: 100px + 50px = 150px Elemento 3: 100px + 25px = 125px

Se la larghezza del contenitore fosse insufficiente (ad esempio 200px), sarebbe necessario comprimere. In caso di spazio insufficiente per la compressione, si considerano flex-shrink e le dimensioni degli elementi. Lo spazio mancante viene distribuito per comprimere tra gli elementi con flex-shrink maggiore di 0, in proporzione al loro flex-shrink moltiplicato per la loro dimensione attuale (dopo flex-basis). L'algoritmo di compressione è un po' più complesso, ma l'idea principale è che gli elementi con flex-shrink più grande o dimensioni maggiori si comprimeranno di più.

È importante ricordare che flex-basis, flex-grow e flex-shrink sono spesso usati insieme come proprietà abbreviata flex. Ad esempio, flex: 1 1 auto; è equivalente a flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Priorità nella distribuzione dello spazio:

flex-basis: Imposta la dimensione iniziale dell'elemento.
flex-grow: Distribuisce lo spazio libero positivo.
flex-shrink: Distribuisce lo spazio libero negativo (necessità di compressione).

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