Flexbox è una proprietà CSS oggi giorno diffusissima, utilizzata per posizionare gli elementi della nostra pagina web in maniera pratica e veloce all’interno di un container (contenitore) genitore.
Questa proprietà ha sostituito del tutto grid, utilizzata negli anni passati per creare griglie con gli elementi.
La peculiarità di flexbox, oltre alla semplicità di utilizzo è la sua compatibilità con i browser più moderni, come ad esempio: Google Chrome, Mozilla Firefox, Edge, etc.
NB: per controllare la compatibilità delle proprietà CSS puoi utilizzare un tool all’indirizzo: https://caniuse.com/.
Questo strumento ti mostrerà, per ogni proprietà da te ricercata, una tabella con tutte le versioni dei Browser per le quali la proprietà è compatibile.
Adesso ti mostrerò come utilizzare flexbox, attraverso degli esempi pratici.
Nell’esempio sopra riportato avremo gli elementi disposti uno sotto l’altro.
Per disporre gli elementi sulla stessa riga (uno accanto all’altro) all’interno del container, ti basterà applicare a quest’ultimo la proprietà display con valore flex (display: flex).
Un’altra importante proprietà è flex-direction, che può avere due valori: row o column. Row è il valore di default, invece column ci permette di disporre gli elementi in verticale su una colonna.
Gli elementi disposti sulla stessa riga (il contenitore deve possedere come regole CSS: display: flex; flex-direction: row) possono essere posizionati in maniera differente.
Per modificare la posizione degli elementi sull’asse orizzontale (x) utilizziamo la proprietà: justify-content.
Quest’ultima può avere come valore: center, space–between, space–around, etc.
Utilizziamo il valore:
- center: per allineare al centro gli elementi all’interno del contenitore;
- space–between: per assegnare spazio tra gli elementi e
- space–around: per assegnare lo stesso spazio prima e dopo ciascun elemento.
justify-content: center
justify-content: space-between
justify-content: space-around (con tre elementi per comprendere al meglio il funzionamento di space-around)
A differenza di justify-content che dispone gli elementi lungo l’asse x, align–items invece dispone gli elementi lungo l’asse y. In questo specifico caso utilizziamo center come valore.
Nel caso in cui gli elementi sono disposti sulla stessa colonna, il contenitore deve possedere come regole CSS: display: flex; flex-direction: column. Per modificare la posizione degli elementi sull’asse orizzontale (x) utilizziamo la proprietà: align-items; invece per modificare la posizione degli elementi sull’asse verticale (y) utilizziamo la proprietà: justify-content. NB: esattamente il contrario di quanto fatto precedentemente.
Flexbox presenta molte altre caratteristiche e proprietà che puoi approfondire in maniera più dettagliata sul sito web: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
