Flexbox è un modulo di layout CSS che ti permette di costruire disposizioni flessibili e adattive per i tuoi elementi HTML. È particolarmente utile quando una disposizione deve adattarsi a schermi e dispositivi di dimensioni diverse.
Con Flexbox allinei gli elementi in orizzontale o in verticale, gestisci lo spazio tra loro e definisci l’ordine in cui vengono mostrati. Offre anche modi flessibili per dimensionare gli elementi, ed è esattamente ciò che serve a un layout responsive.
Per usare Flexbox nel tuo progetto devi prima dichiarare un contenitore flex con la proprietà CSS display: flex oppure display: inline-flex su un elemento HTML. Da lì in poi le proprietà di Flexbox governano la disposizione dei suoi figli.
.container-flex {
display: flex;
}Come allineare gli elementi con Flexbox
Una delle cose più utili che fa Flexbox è allineare gli elementi in modo flessibile. Diverse proprietà ti danno il controllo sull’allineamento degli elementi dentro un contenitore Flexbox.
Allineamento orizzontale degli elementi con justify-content
La proprietà justify-content controlla l’allineamento orizzontale degli elementi.
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
/*allinea gli elementi al bordo sinistro*/
.container {
justify-content: flex-start;
}
/*centra gli elementi*/
.container {
justify-content: center;
}
/*allinea gli elementi al bordo destro*/
.container {
justify-content: flex-end;
}
/*distribuisce gli elementi in modo uniforme tra il bordo sinistro e destro senza spazio ai bordi*/
.container {
justify-content: space-between;
}
/*distribuisce gli elementi in modo uniforme tra il bordo sinistro e destro con spazio uguale ai due bordi*/
.container {
justify-content: space-around;
}
/* distribuisce gli elementi in modo uniforme tra il bordo sinistro e destro con spazio uguale ai due bordi e tra ogni elemento */
.container {
justify-content: space-evenly;
}Allineamento verticale degli elementi con align-items
La proprietà align-items controlla l’allineamento verticale degli elementi.
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;
/* Allineare tutti gli elementi in alto */
.container {
align-items: flex-start;
}
/* Allineare tutti gli elementi al centro */
.container {
align-items: center;
}
/* Allineare tutti gli elementi in basso */
.container {
align-items: flex-end;
}
/*fa in modo che gli elementi si adattino all'altezza del loro contenuto*/
.container {
align-items: stretch;
}Come gestire lo spazio tra gli elementi con Flexbox
Flexbox ti permette anche di gestire lo spazio tra gli elementi in modo flessibile. Diverse proprietà controllano la spaziatura degli elementi dentro un contenitore Flexbox.
Aggiungere spazio tra gli elementi con margin
La proprietà margin definisce lo spazio tra un elemento e gli altri. Serve a impostare la spaziatura elemento per elemento.
/* Aggiungere 20px di spaziatura tra ogni elemento */
.item {
margin: 0 20px;
}Aggiungere spazio attorno a un elemento con padding
La proprietà padding definisce lo spazio tra i bordi di un elemento e il suo contenuto. Serve ad aggiungere spazio attorno a un singolo elemento.
/* Aggiungere 20px di spaziatura attorno a un elemento */
.item {
padding: 20px;
}Usare gap per spaziare gli elementi
Da CSS Grid Layout in poi, Flexbox può usare gap per aggiungere spazio tra gli elementi. Questa proprietà definisce uno spazio uniforme tra tutti gli elementi di un contenitore flex.
/* Aggiungere 20px di spaziatura tra tutti gli elementi */
.container {
gap: 20px;
}Questa proprietà si usa insieme a row-gap e column-gap per definire spaziature diverse tra le righe e tra le colonne. Attenzione: vale solo per i figli diretti del contenitore flex, e conviene verificarne il supporto sui browser prima di adottarla.
Le proprietà di Flexbox
Flexbox offre molte proprietà per costruire disposizioni flessibili e adattive dei tuoi elementi HTML. In questa parte vediamo quelle di uso più comune.
flex-direction
La proprietà flex-direction definisce la direzione in cui gli elementi vengono disposti in un contenitore flex. I valori possibili sono quattro: row, row-reverse, column e column-reverse. Il valore predefinito è row.
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
/* Disposizione degli elementi in riga (predefinito) */
.container {
flex-direction: row;
}
/* Disposizione degli elementi in riga invertita */
.container {
flex-direction: row-reverse;
}
/* Disposizione degli elementi in colonna */
.container {
flex-direction: column;
}
/* Disposizione degli elementi in colonna invertita */
.container {
flex-direction: column-reverse;
}
flex-wrap
La proprietà flex-wrap definisce se gli elementi di un contenitore flex vanno disposti su una sola riga o su più righe. Esistono tre valori possibili: nowrap (predefinito), wrap e wrap-reverse, che impila le righe in ordine inverso.
flex-wrap: nowrap;
flex-wrap: wrap;
/* Disposizione degli elementi su una sola riga (predefinito) */
.container {
flex-wrap: nowrap;
}
/* Disposizione degli elementi su più righe */
.container {
flex-wrap: wrap;
}flex-flow
La proprietà flex-flow è la scorciatoia per le proprietà flex-direction e flex-wrap:
/* Disposizione degli elementi in riga e su più righe */
.container {
flex-flow: row wrap;
}justify-content
La proprietà justify-content definisce come gli elementi vengono allineati sull’asse orizzontale (x) di un contenitore flex. I valori possibili sono flex-start, center, flex-end, space-between, space-around e space-evenly. Il valore predefinito è flex-start.
/*allinea gli elementi al bordo sinistro*/
.container {
justify-content: flex-start;
}
/*centra gli elementi*/
.container {
justify-content: center;
}
/*allinea gli elementi al bordo destro*/
.container {
justify-content: flex-end;
}
/*distribuisce gli elementi in modo uniforme tra
il bordo sinistro e destro senza spazio ai bordi*/
.container {
justify-content: space-between;
}
/*distribuisce gli elementi in modo uniforme tra il bordo sinistro
e destro con spazio uguale ai due bordi*/
.container {
justify-content: space-around;
}
/* distribuisce gli elementi in modo uniforme tra il bordo sinistro
e destro con spazio uguale ai due bordi e
tra ogni elemento */
.container {
justify-content: space-evenly;
}align-items
La proprietà align-items definisce come gli elementi vengono allineati sull’asse verticale (y) di un contenitore flex. I valori possibili sono flex-start, center, flex-end, baseline e stretch. Il valore predefinito è stretch.
/* Allineare tutti gli elementi in alto */
.container {
align-items: flex-start;
}
/* Allineare tutti gli elementi al centro */
.container {
align-items: center;
}
/* Allineare tutti gli elementi in basso */
.container {
align-items: flex-end;
}
/*fa in modo che gli elementi si adattino all'altezza del loro contenuto*/
.container {
align-items: stretch;
}align-content
La proprietà align-content è simile ad align-items, ma agisce sulle righe di un contenitore flex a più righe. Accetta gli stessi valori di align-items, più space-between, space-around e space-evenly per distribuire le righe.
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
/*allinea gli elementi al bordo sinistro*/
.container {
justify-content: flex-start;
}
/*centra gli elementi*/
.container {
justify-content: center;
}
/*allinea gli elementi al bordo destro*/
.container {
justify-content: flex-end;
}
/*distribuisce gli elementi in modo uniforme tra il
bordo sinistro e destro senza spazio ai
bordi*/
.container {
justify-content: space-between;
}
/*distribuisce gli elementi in modo uniforme tra il bordo
sinistro e destro con spazio uguale ai
due bordi*/
.container {
justify-content: space-around;
}
/* distribuisce gli elementi in modo uniforme tra il bordo
sinistro e destro con spazio uguale ai
due bordi e tra ogni elemento */
.container {
justify-content: space-evenly;
}order
La proprietà order definisce l’ordine di visualizzazione degli elementi di un contenitore flex. Prende come valore un numero intero e vale 0 per impostazione predefinita.
<div class="container">
<div class="item first">1</div>
<div class="item second">2</div>
<div class="item third">3</div>
<div class="item fourth">4</div>
<div class="item fifth">5</div>
</div>.container {
display: flex;
}
/*definisce l'elemento 1 come primo*/
.first {
order: -1;
}
/*definisce l'elemento 3 come secondo*/
.third {
order: 2;
}
/*definisce l'elemento 5 come ultimo*/
.fifth {
order: 3;
}
Con questo codice l’ordine di visualizzazione degli elementi sarà: 1, 3, 2, 4, 5
Tutti gli elementi con un valore di ordine definito vengono ordinati in base a quel valore, mentre quelli senza valore prendono 0. Gli elementi con valori negativi compaiono prima di quelli con valori positivi.
Puoi giocare su questi valori per ottenere la disposizione che vuoi. Attenzione: l’ordine in cui scrivi le proprietà CSS nel file non influisce sull’ordine di visualizzazione, per gestirlo devi usare order.
flex-grow, flex-shrink e flex-basis
Le proprietà flex-grow, flex-shrink e flex-basis definiscono la dimensione degli elementi di un contenitore flex.
flex-growdefinisce la quota di spazio disponibile che ogni elemento deve occupare.flex-shrinkdefinisce la quota di spazio di cui un elemento deve ridursi per entrare in un contenitore più piccolo.flex-basisdefinisce la dimensione di partenza di un elemento prima che entrino in gioco le proprietàflex-groweflex-shrink.
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
/* fa in modo che l'elemento occupi
tutto lo spazio disponibile */
.item {
flex-grow: 1;
}
/* fa in modo che l'elemento si riduca
per adattarsi a un contenitore più piccolo */
.item {
flex-shrink: 1;
}
/* definire una base di 200px per un elemento */
.item {
flex-basis: 200px;
}Puoi combinare queste proprietà con la proprietà flex
/* flex: flex-grow | flex-shrink | flex-basi */
.item {
flex: 1 1 200px;
}Esempi
Esempio 1: una griglia con Flexbox
<div class="container-flex">
<div class="item-flex item1">1</div>
<div class="item-flex item2">2</div>
<div class="item-flex item3">3</div>
<div class="item-flex item4">4</div>
<div class="item-flex item5">5</div>
<div class="item-flex item6">6</div>
<div class="item-flex item7">7</div>
<div class="item-flex item8">8</div>
<div class="item-flex item9">9</div>
</div>.container-flex {
display: flex;
flex-wrap: wrap;
/* permette all'elemento di distribuirsi su
più righe se non c'è abbastanza spazio */
justify-content: space-between;
/* permette di distribuire gli elementi in modo uniforme
tra il bordo sinistro e destro senza spazio
ai bordi */
align-content: space-between;
/* permette di distribuire le righe in modo uniforme tra
il bordo superiore e inferiore senza spazio ai bordi */
}
.item-flex {
text-align: center;
flex: 1 0 calc(33.33% - 20px);
/* usa flex-grow e flex-basis per distribuire gli
elementi su una griglia di 3 colonne usando
il 33.33% della larghezza disponibile e
riducendo di 20px lo spazio tra ogni elemento */
}
Con la proprietà flex definisci come gli elementi si adattano allo spazio disponibile nel contenitore flex. In questo esempio usiamo flex: 1 0 calc(33.33% - 20px); per distribuire gli elementi su una griglia di 3 colonne, occupando il 33.33% della larghezza disponibile e sottraendo 20px di spazio tra un elemento e l’altro. Il risultato è una griglia reattiva che si adatta da sola alla dimensione della finestra.
Combinando justify-content, align-content e flex costruisci disposizioni flessibili e adattive per qualsiasi esigenza di impaginazione. Queste proprietà si combinano in molti modi diversi per ottenere layout su misura: sperimenta con le varie combinazioni per trovare quella giusta per il tuo progetto.
Esempio 2: menu responsive
<nav class="menu-container">
<a href="#" class="menu-item">Home</a>
<a href="#" class="menu-item">About</a>
<a href="#" class="menu-item">Services</a>
<a href="#" class="menu-item">Contact</a>
</nav>.menu-container {
display: flex; /* attiva la disposizione flex */
justify-content: space-between; /* allinea le voci di menu a destra e a sinistra */
align-items: center; /* allinea le voci di menu al centro in verticale */
}
/* Aggiunge un pulsante di menu per gli schermi piccoli */
.menu-container::before {
content: "Menu"; /* Testo mostrato sul pulsante */
display: none; /* nasconde il pulsante per impostazione predefinita */
}
/* Quando la risoluzione dello schermo è inferiore a 600px */
@media (max-width: 600px) {
.menu-container {
flex-wrap: wrap; /* Permette agli elementi di andare a capo su più righe */
justify-content: center; /* Centra gli elementi in orizzontale */
}
.menu-item {
flex-basis: 100%; /* Occupa tutta la larghezza disponibile */
text-align: center; /* Centra il testo */
}
.menu-container::before {
display: block; /* Mostra il pulsante di menu */
}
}In questo esempio il menu è disposto in orizzontale e allineato a destra e a sinistra sugli schermi larghi (comportamento predefinito). Sugli schermi piccoli (sotto i 600px di larghezza) gli elementi sono centrati e vanno a capo su più righe, e compare un pulsante «Menu» per aprire e chiudere il menu con JavaScript o con lo strumento che preferisci. Se vuoi un esempio più dettagliato di menu con Flexbox, ho scritto un articolo dedicato.
Conclusione
Con la proprietà CSS Flexbox costruisci facilmente disposizioni flessibili e adattive per i tuoi elementi HTML. Con proprietà come display, justify-content, align-items e flex allinei e organizzi gli elementi di un contenitore flex in modo efficace.
Flexbox è particolarmente utile per creare griglie di contenuti, menu e form reattivi, perché distribuisce lo spazio disponibile in base alle esigenze del layout. Non è la soluzione a tutti i problemi di impaginazione, ma risolve bene diversi casi ricorrenti. Spesso si usa insieme ad altre tecnologie di layout come Grid Layout o a framework come Bootstrap.
In conclusione, Flexbox è uno strumento potente per costruire layout flessibili e adattivi in siti e applicazioni web. Conoscerne le proprietà e gli usi di base è il modo migliore per sfruttarlo davvero. Ricordati di verificare i limiti di compatibilità dei browser prima di usarlo nei tuoi progetti.
Questa compatibilità si può automatizzare in fase di build: PostCSS aggiunge i prefissi dei browser a partire dall’elenco di browser che prendi come target. La configurazione è spiegata nella guida a Webpack 5, con la trappola della query last 2 versions, che fa rientrare Internet Explorer e gonfia il CSS di prefissi morti.
