Articolo originale: https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/
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!