Articolo originale: Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) di Beau Carnes

Tradotto e adattato da: Dario Di Cillo

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

image-9
Diagramma della terminologia flexbox dalle specifiche ufficiali W3C.

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:

ChnkgUaWEN6dmtS4EQCG60uqIjZVphsErq91
Source: Scott Domes

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.

6WwoIEc45lUHUcFQCmD8GmziiISm2lO64Y1-
Source: Scott Domes

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.

wEg7wdKEfv9-bqaiB-t9hzOapBPiqZVYNFIh
Source: Scott Domes

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

zYdQGSmhtMyqcAbEUDoEehohC8E-gtgvQx6b
Source: Scott Domes

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:

OBGVr-DdHiQ2y9VOWuhXqXeGnFnyDSBTx7hv
Source: Scott Domes

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:

UgsULw0Kk49l-l1wSzeurYNJKCmcA-01oE8a
Source: Scott Domes

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

u9tCV-zRt3qpgSyNQt53e-eRz0-HIrsqqOk-
Source: Scott Domes

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.

HbnMZT330ylw5idocqrjOfp9DrlZt9JrJm9o
Source: Scott Domes

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!