Flexbox promette di salvarci dai mali del semplice CSS (come l'allineamento verticale).

Bene, Flexbox ci permette di raggiungere questo obiettivo. Ma padroneggiare il suo nuovo modello mentale può essere difficile.

Diamo quindi uno sguardo animato a come funziona Flexbox, in modo da poterlo usare per creare dei layout migliori.

Il principio alla base di Flexbox è rendere i layout flessibili e intuitivi.

Per ottenere questo risultato, fa sì che i contenitori possano decidere da soli come distribuire uniformemente i propri elementi figli — inclusi la loro dimensione e lo spazio tra di essi.

Tutto ciò suona bene in linea di principio. Ma vediamo come si presenta in pratica.

In questo articolo, analizzeremo le 5 proprietà Flexbox più comuni. Esploreremo cosa fanno, come si possono usare e qual è il risultato effettivo.

Proprietà #1: display: flex

Ecco una pagina web di esempio:

Ci sono quattro div colorati di dimensioni diverse, all'interno di un div contenitore grigio. Per ora ogni div ha la proprietà predefinita display: block. Quindi, ogni quadrato occupa l'intera larghezza della sua riga.

Per utilizzare Flexbox, dobbiamo rendere l'elemento contenitore un contenitore flex, in questo modo:

#contenitore {
    display: flex;
}

Non è cambiato molto — ora i div sono visualizzati in linea, ma questo è tutto. Tuttavia, dietro le quinte abbiamo fatto una cosa molto importante. Abbiamo fornito ai quadrati qualcosa chiamato contesto flex.

Ora possiamo iniziare a posizionarli all'interno di questo contesto, con molta meno difficoltà rispetto al CSS tradizionale.

Proprietà #2: flex-direction

Un contenitore Flexbox ha due assi: un asse principale (main) e un asse trasversale (cross). Nella modalità predefinita hanno questa orientazione:

Di default, gli elementi sono disposti lungo l'asse principale, da sinistra a destra. Ecco perché i quadrati si sono disposti in una riga orizzontale non abbiamo applicato display: flex.

Tuttavia, la proprietà flex-direction, consente di ruotare l'asse principale.

#contenitore {
    display: flex;
    flex-direction: column;
}

Qui c'è un'importante distinzione da fare: flex-direction: column non allinea i quadrati sull'asse trasversale invece di quello principale. Cambia l'asse principale stesso da orizzontale a verticale.

Esistono anche un paio di altre opzioni per flex-direction: row-reverse e column-reverse.

Proprietà #3: justify-content

justify-content controlla l'allineamento degli elementi sull'asse principale.

Qui ci addentriamo maggiormente nella distinzione tra asse principale e trasversale. Innanzitutto, ritorniamo a flex-direction: row.

#contenitore {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

Abbiamo cinque valori a disposizione per justify-content:

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around

space-around e space-between sono i meno intuitivi. space-between dà uguale spazio tra ciascun quadrato, ma non tra i quadrati e il contenitore.

space-around inserisce un cuscino di spazio uguale su entrambi i lati del quadrato — il che vuole dire che lo spazio tra i quadrati più esterni e il contenitore è la metà dello spazio tra due quadrati (ogni quadrato contribuisce con un uguale ammontare di margine non sovrapposto, quindi raddoppiando lo spazio).

Una nota finale: ricorda che justify-content lavora lungo l'asse principale, e flex-direction inverte l'asse principale. Questo sarà importante mentre ci spostiamo verso…

Proprietà #4: align-items

Se hai 'afferrato' justify-content, align-items sarà un gioco da ragazzi.

Se justify-content lavora lungo l'asse principale, align-items si applica all'asse trasversale.

Reimpostiamo la direzione su flex-direction: row, in modo che gli assi siano uguali a quelli dell'immagine qui sopra.

Ora approfondiamo i comandi di align-items.

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

I primi tre sono esattamente gli stessi di justify-content, quindi niente di particolare qui.

Tuttavia gli altri due sono un po' diversi.

Abbiamo stretch, in cui gli elementi occupano l'intero asse trasversale e baseline, in cui la parte inferiore dei tag di paragrafo è allineata.

Nota che per align-items: stretch, ho dovuto impostare l'altezza dei quadrati su auto, altrimenti la proprietà height avrebbe la precedenza su stretch.

Per baseline, sii consapevole che se togli i tag di paragrafo, l'allineamento avviene rispetto alla base dei quadrati, in questo modo:

Per una migliore dimostrazione degli assi principale e trasversale, combiniamo le proprietà justify-content e align-items per vedere come funziona la centratura in modo diverso per i due valori di flex-direction:

Con row, i quadrati sono disposti lungo un asse principale orizzontale. Con column, si dispongono lungo un asse principale verticale.

Anche se i quadrati sono centrati sia verticalmente che orizzontalmente in entrambi i casi, i due non sono intercambiabili!

Proprietà #5: align-self

align-self ci consente di manipolare manualmente l'allineamento di un particolare elemento.

In pratica, sovrascrive align-items per un quadrato. Tutte le proprietà sono le stesse, sebbene l'impostazione predefinita sia auto, in cui segue la proprietà align-items del contenitore.

#contenitore {
     align-items: flex-start;
 }

.quadrato#uno {
    align-self: center;
}
// Solo questo quadrato verrà centrato.

Vediamo qual è il risultato applicando align-self a due quadrati e align-items: center e flex-direction: row agli altri.

Conclusione

Anche se è abbiamo affrontato Flexbox scavando soltanto in superficie, questi comandi dovrebbero essere sufficienti per gestire la maggior parte degli allineamenti di base — e per allineare verticalmente quello che desideri.

Grazie per aver letto questo articolo!

Questo compendio integrale su flexbox in CSS tratterà tutto quello che hai bisogno di sapere per iniziare a usare flexbox nei tuoi progetti per il web.

Il layout di CSS flexbox ti permette una facile formattazione dell'HTML. Flexbox semplifica l'allineamento verticale e orizzontale tramite righe e colonne. Gli oggetti si adatteranno a diverse dimensioni per riempire lo spazio, rendendo più semplice il design responsivo.

CSS flexbox è ottimo da utilizzare per il layout generale di un sito web o un'app. È facile da imparare, è supportato da tutti i browser moderni e non serve molto per comprenderne le basi. Alla fine di questa guida, sarai pronto ad utilizzare flexbox nei tuoi progetti.

Quest'articolo include delle gif animate create da Scott Domes che ti aiuteranno a capire e visualizzare come funziona flexbox.

Tutte le proprietà di CSS flexbox

Ecco una lista di tutte le proprietà di CSS flexbox che possono essere utilizzate per posizionare gli elementi in CSS. Più avanti vedremo come funzionano.

CSS che può essere applicato al contenitore

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS che può essere applicato agli elementi nel contenitore

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Terminologia

Prima di imparare quali proprietà flexbox utilizzare, è importante capire la terminologia associata. Ecco le definizioni dei termini chiave flexbox, prese dalle specifiche ufficiali W3C per flexbox:

• main-axis: l'asse principale del contenitore flex è l'asse primario lungo il quale sono disposti gli oggetti flex. La direzione si basa sul valore della proprietà flex-direction.
• main-start | main-end: gli oggetti flex vengono posizionati all'interno del contenitore partendo dal lato main-start verso il lato main-end.
• main size: la dimensione principale corrisponde alle proprietà width (larghezza) o height (altezza) del contenitore flex o dell'oggetto flex, a seconda di qual è l'asse principale.
• cross axis: l'asse perpendicolare all'asse principale viene chiamato cross axis. La sua direzione dipende da quella dell'asse principale.
• cross-start | cross-end: le linee flex sono riempite dagli oggetti flex posizionati nel contenitore partendo dal lato cross-start del contenitore flex verso il lato cross-end.
• cross size: la larghezza o l'altezza di un oggetto flex, corrispondenti alle proprietà ‘width’ o ‘height’, a seconda di quale è l'asse perpendicolare.

CSS Display Flex

display: flex comunica al tuo browser "voglio usare flexbox con questo contenitore".

L'impostazione predefinita di un elemento div è display:block. Un elemento con questa impostazione display occupa tutta la larghezza della pagina in corrispondenza della riga in cui è collocato. Ecco un esempio di quattro div colorati all'interno di un div genitore con le impostazioni di default:

Per usare flexbox su una sezione della tua pagina, prima di tutto, converti l'elemento genitore in un contenitore flex aggiungendo display: flex; al suo CSS.

In questo modo, l'elemento diventerà un contenitore flex al quale verranno applicate delle proprietà flex di default.

Flex Direction

flex-direction ti permette di controllare la disposizione degli oggetti nel contenitore. Li vuoi da sinistra a destra, da destra a sinistra, dall'alto in basso o dal basso in alto? Puoi fare tutto questo facilmente, impostando la proprietà flex-direction del contenitore.

La disposizione di default di display: flex corrisponde agli elementi posizionati lungo l'asse principale da sinistra a destra. L'animazione qui sotto mostra cosa accade quando la proprietà flex-direction: column viene aggiunta all'elemento contenitore.

Puoi anche impostare flex-direction su row-reverse e column-reverse.

Justify Content

justify-content è una proprietà usata per allineare elementi all'interno del contenitore lungo l'asse principale (vedi il diagramma con la terminologia). Questa proprietà permetti di riempire qualsiasi spazio vuoto sulle righe e definisce come vogliamo "giustificare" il contenuto.

Questi sono i valori più comuni di justify-content: flex-start | flex-end | center | space-between | space-around.

Ed ecco quale effetto producono i differenti valori:

space-between distribuisce gli oggetti in modo che il primo sia allineato all'inizio e l'ultimo sia allineato alla fine. space-around è simile, ma gli oggetti sono disposti in modo tale che alle estremità ci sia la metà dello spazio rispetto a quello tra gli oggetti.

Flex Align Items

align-items permette di allineare gli oggetti lungo l'asse perpendicolare (vedi sopra per il diagramma con la terminologia). Il contenuto può essere posizionato in molti modi diversi usando insieme justify-content e align-items.

Ecco le opzioni più comuni per la proprietà align-items: flex-start | flex-end | center | baseline | stretch

Affinché stretch funzioni come atteso, l'altezza degli elementi deve essere impostata su auto invece che su di un valore specifico.

Questa animazione mostra come vengono disposti gli elementi con le diverse opzioni:

Adesso useremo sia justify-content che align-items, così da evidenziare la differenza tra l'asse principale e quello perpendicolare.

Align Self

align-self ti permette di regolare l'allineamento di un singolo elemento.

Accetta gli stessi valori di align-items.

Nella prossima animazione, il div genitore ha il CSS align-items: center e flex-direction: row. I primi due quadrati assumono diversi valori di align-self.

Flex Wrap

Flexbox proverà a disporre gli elementi su una riga come impostazione predefinita. Tuttavia, puoi cambiare questa impostazione con la proprietà flex-wrap. Ci sono tre valori che puoi usare per determinare quando sistemare gli elementi in un'altra riga.

Il valore di default è flex-wrap: nowrap e fa sì che tutto sia posizionato in una sola riga, da sinistra verso destra.

flex-wrap: wrap  consentirà agli elementi di passare alla  riga successiva una volta esaurito lo spazio nella prima. Gli elementi vengono disposti da sinistra a destra.

Anche flex-wrap: wrap-reverse permette agli elementi di passare alla riga successiva ma, in questo caso, vengono posizionati da destra verso sinistra.

Flex Flow

flex-flow combina flex-wrap e flex-direction in una proprietà unica. Viene usato scrivendo prima la direzione e poi il wrap. Ad esempio: flex-flow: column wrap;.

Align Content

align-content serve per allineare elementi su più linee. L'allineamento avviene secondo l'asse perpendicolare e non ha effetto sul contenuto presente nelle singole linee.

Queste sono le opzioni disponibili: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Allineamento verticale con Flexbox

Se vuoi centrare verticalmente tutto il contenuto all'interno di un elemento genitore, puoi usare align-items. Questo è il codice da utilizzare:

.parent {
    display: flex;
    align-items: center;
}

Giochi e App

Se vuoi fare pratica con flexbox, prova questi giochi e app che ti aiuteranno a padroneggiare il suo utilizzo.

• Flexbox Defense è un gioco in cui puoi imparare a usare flexbox cercando di impedire ai nemici in avvicinamento di superare le tue difese.
• Flexbox Froggy è un gioco in cui devi aiutare Froggy e i suoi aminici a scrivere del codice CSS.
• Flexyboxes è un'app che ti permette di vedere esempi di codice e cambiare parametri per visualizzare il modo in cui opera flexbox.
• Flexbox Patters è un sito web che contiene svariati esempi di flexbox.

Conclusione

Abbiamo affrontato tutti le proprietà più comuni di CSS flexbox. Prova a realizzare qualche progetto, così potrai abituarti presto al funzionamento di flexbox. Il prossimo passo è la pratica!