Come si possono modificare in modo flessibile le dimensioni degli elementi che usano flexbox?

È possibile modificare in modo flessibile le dimensioni degli elementi in flexbox utilizzando le proprietà flex-grow, flex-shrink e flex-basis.

• flex-grow: Determina quanto un elemento può espandersi, occupando lo spazio libero nel contenitore. Il valore predefinito è 0 (non si espande). Un valore più alto indica un coefficiente di espansione maggiore rispetto agli altri elementi.
• flex-shrink: Determina quanto un elemento può comprimersi in caso di mancanza di spazio libero. Il valore predefinito è 1 (si comprime). Un valore più alto indica un coefficiente di compressione maggiore.
• flex-basis: Determina la dimensione di base dell’elemento prima della distribuzione dello spazio libero. Può essere un valore fisso (px, %, rem) o una parola chiave (auto, content).

Queste tre proprietà sono spesso combinate nella proprietà abbreviata flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Esempi di utilizzo:

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

/* L’elemento non si comprimerà in caso di mancanza di spazio */
.flex-item {
  flex-shrink: 0;
}

/* L’elemento ha una dimensione di base di 100px e si espande se c’è spazio */
.flex-item {
  flex: 1 1 100px;
}

/* L’elemento ha una dimensione di base definita dal suo contenuto e può comprimersi */
.flex-item {
  flex: 0 1 auto; /* Equivale a flex: initial; */
}

/* L’elemento non si espande né si comprime e ha una dimensione di base definita dal suo contenuto */
.flex-item {
  flex: 0 0 auto; /* Equivale a flex: none; */
}

/* L’elemento si espande, si comprime e ha una dimensione di base 0 (utile per creare elementi di larghezza uguale) */
.flex-item {
  flex: 1 1 0; /* Equivale a flex: auto; */
}

L’uso di queste proprietà consente di gestire con precisione il comportamento degli elementi all’interno di un contenitore flex al variare delle dimensioni dello schermo o del contenuto.