Flexbox avanzato: flex-grow, flex-shrink, flex-basis, order, align-self

Nella pillola "Flexbox da zero: container, items, main axis, cross axis", abbiamo visto dove flexbox posiziona gli elementi. Qui vediamo quanto spazio ciascuno prende sul main axis: le tre proprietà che, insieme, decidono se un elemento cresce, si restringe, o resta fisso.

1. flex-grow: chi cresce, e di quanto

Quando il container ha spazio in eccesso sul main axis, flex-grow decide come distribuirlo. Il valore è un fattore proporzionale: un elemento con flex-grow: 2 cresce il doppio rispetto a uno con flex-grow: 1.

.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }
/* lo spazio extra si divide 1/3 a item-a, 2/3 a item-b */

Il valore predefinito, quando non specificato, è 0: per questo, senza impostare nulla, gli elementi flex non si allargano da soli per riempire lo spazio in eccesso.

Fonte: MDN Web Docs, «flex-grow»: distribuisce lo spazio libero positivo proporzionalmente al valore di ciascun item, valore predefinito 0.

2. flex-shrink: chi si restringe, e di quanto

Il caso opposto: quando gli elementi insieme superano lo spazio disponibile, flex-shrink decide chi si comprime di più. Il valore predefinito è 1, quindi, a differenza di flex-grow, gli elementi si restringono automaticamente per non causare overflow, anche senza specificare nulla.

MDN segnala che il calcolo è più complesso di quello di flex-grow: il fattore di restringimento viene moltiplicato per la dimensione di base dell'elemento, per evitare che un elemento piccolo si schiacci a 0px prima che uno grande si sia ridotto in modo percepibile.

Fonte: MDN Web Docs, «flex-shrink»: valore predefinito 1; il fattore di restringimento è moltiplicato per la flex base size, distribuendo lo spazio negativo in proporzione a quanto ciascun item può restringersi.

3. flex-basis: la dimensione di partenza

flex-basis imposta la dimensione iniziale di un elemento sul main axis, prima che flex-grow/flex-shrink intervengano. Il suo valore iniziale è auto: in quel caso, la dimensione di partenza coincide con la larghezza (o altezza) dichiarata sull'elemento, o con il contenuto se non c'è nessuna dimensione impostata.

.item { 
   flex-basis: 200px; 
}  /* parte da 200px, poi grow/shrink agiscono */

Fonte: MDN Web Docs, «flex-basis»: imposta la dimensione iniziale di un flex item sul main axis prima della distribuzione di spazio libero o negativo.

4. La scorciatoia flex: usarla sempre, non le tre proprietà singole

MDN raccomanda esplicitamente di usare la proprietà shorthand flex con un valore chiave, invece di impostare flex-grow, flex-shrink e flex-basis separatamente: combinazioni pensate per i casi d'uso più comuni.

flex: 1;        /* = flex-grow:1 flex-shrink:1 flex-basis:0%    cresce e si restringe */
flex: auto;     /* = flex-grow:1 flex-shrink:1 flex-basis:auto  parte dal contenuto */
flex: initial;  /* = flex-grow:0 flex-shrink:1 flex-basis:auto  il valore predefinito */
flex: none;     /* = flex-grow:0 flex-shrink:0 flex-basis:auto  completamente rigido */

Il caso più comune in assoluto: tre colonne uguali che si dividono tutto lo spazio disponibile.

.colonna { flex: 1; }  /* tutte crescono/si restringono in proporzione uguale */

Fonte: MDN Web Docs, «flex»: raccomandato l'uso dello shorthand con valori chiave (auto, initial, none, o un numero) invece delle proprietà singole.

5. order: cambiare l'ordine visivo

order riordina gli elementi visivamente, a prescindere dall'ordine nel codice sorgente. Il valore predefinito è 0; gli elementi si dispongono in ordine crescente di questo valore.

.prima-nel-codice { order: 2; }
.seconda-nel-codice { order: 1; }  /* appare visivamente prima dell'altra */

Avvertimento importante, dal manuale ufficiale: order cambia solo l'ordine visivo, non l'ordine di tabulazione né quello letto dagli screen reader. Un disallineamento tra ordine visivo e ordine reale del documento penalizza chi naviga con tecnologie assistive: l'esperienza cambia a seconda di come si accede al contenuto.

Fonte: MDN Web Docs, «order»: crea una disconnessione tra presentazione visiva e ordine del DOM, con impatto negativo su utenti con bassa vista che usano tecnologie assistive; non va usato per riordinare contenuti non visivi.

6. align-self: un'eccezione individuale sul cross axis

align-self fa per un singolo elemento ciò che align-items fa per tutti: lo allinea sul cross axis. Impostato sull'item, non sul container, sovrascrive il comportamento generale solo per quell'elemento.

.contenitore { display: flex; align-items: flex-start; }
.item-speciale { align-self: center; }  /* solo questo si centra */

Fonte: MDN Web Docs, «align-self»: sovrascrive, per il singolo item su cui è applicata, il valore di align-items ereditato dal container.

In sintesi

Le tre proprietà flex-grow, flex-shrink e flex-basis sono, in pratica, quasi sempre scritte insieme tramite lo shorthand flex. Impararle separatamente serve a capire cosa fa ciascun numero, non a scriverle sempre a mano una per una.