Flex Grow Flex Shrink E Flex Basis

Prerequisiti: Ritorno a capo con flex-wrap.

La proprietà abbreviata flex combina crescita, riduzione e dimensione di base. flex: 1 1 12rem indica che l’elemento può crescere, può ridursi e parte da una base di 12rem. flex-basis partecipa al calcolo lungo l’asse principale: con row riguarda la dimensione orizzontale, con column quella verticale. Non è sempre una larghezza definitiva: lo spazio disponibile, le altre scatole e i vincoli minimi o massimi influenzano il risultato.

flex-grow distribuisce lo spazio positivo rimasto dopo il calcolo delle basi, secondo fattori relativi. Un elemento con fattore 2 riceve una quota doppia dello spazio aggiuntivo di uno con fattore 1 nel caso semplice, ma non diventa necessariamente largo il doppio perché le basi contribuiscono alla dimensione finale. Quando manca spazio, flex-shrink partecipa alla riduzione ponderando anche la dimensione di base: i soli fattori non descrivono tutta la distribuzione.

Gli elementi flex hanno spesso un minimo automatico legato al contenuto. Una stringa lunga può quindi impedire la riduzione prevista. min-width: 0 permette, nel layout orizzontale qui proposto, di scendere sotto quel minimo; overflow-wrap aiuta poi a mantenere leggibile il testo. Non risolvere tutto comprimendo alla cieca: prova una base ragionevole, wrap e contenuti realistici. Le schede devono funzionare anche quando un titolo è più lungo degli altri.

Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex-grow, flex-shrink e flex-basis</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="gruppo">
<article class="scheda">Prima scheda</article>
<article class="scheda">Seconda scheda con un titolo più lungo</article>
<article class="scheda">Terza scheda</article>
</div>
</body>
</html>

.gruppo { display: flex; flex-wrap: wrap; gap: 1rem; }
.scheda {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid #174a7e;
  overflow-wrap: anywhere;
}

Le schede partono da una base condivisa, crescono per occupare spazio e possono disporsi su più righe. Il minimo esplicito e la gestione delle parole evitano rigidità indesiderate.

.scheda {
  flex: 1 1 16rem;
  min-width: 0;
}

Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.

Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.