Flexbox: layout flessibile per il web

Flexbox, abbreviazione di “Flexible Box Layout“, è un modulo di layout CSS che fornisce un modo per creare layout flessibili e reattivi. È progettato per semplificare l’allineamento e la distribuzione dello spazio tra gli elementi in un contenitore, indipendentemente dalla loro dimensione o ordine.

Flexbox funziona definendo un elemento contenitore flessibile e specificando come gli elementi figli devono essere disposti al suo interno. L’elemento contenitore è noto come “flex container” e i suoi figli come “flex items“. Con Flexbox, è possibile allineare gli elementi orizzontalmente e verticalmente, distribuire lo spazio tra gli elementi in modo uniforme, invertire l’ordine degli elementi, gestire il reflow e molto altro ancora.

I selettori di Flexbox in CSS sono i seguenti:

1. display: flex: il selettore principale per abilitare Flexbox. Viene applicato all’elemento contenitore e rende i suoi figli elementi flessibili.
2. flex-direction: specifica l’orientamento del contenitore Flex e la direzione in cui vengono posizionati i suoi elementi figli. Può essere “row” (orizzontale), “column” (verticale), “row-reverse” (orizzontale inverso) o “column-reverse” (verticale inverso).
3. flex-wrap: specifica se gli elementi figli devono essere avvolti su più righe o colonne quando non ci sono abbastanza spazi nel contenitore Flex. Può essere “nowrap” (nessun avvolgimento), “wrap” (avvolgimento normale), o “wrap-reverse” (avvolgimento inverso).
4. flex-flow: una proprietà abbreviata che combina flex-direction e flex-wrap in una sola dichiarazione.
5. justify-content: specifica come viene distribuito lo spazio lungo l’asse principale del contenitore Flex. Può essere “flex-start” (allineamento a sinistra), “flex-end” (allineamento a destra), “center” (centrato), “space-between” (distribuzione uniforme degli elementi con spazi vuoti), “space-around” (distribuzione uniforme degli elementi con spazi vuoti su entrambi i lati) o “space-evenly” (distribuzione uniforme degli elementi con spazi vuoti uguali su entrambi i lati e tra gli elementi).
6. align-items: specifica come viene distribuito lo spazio lungo l’asse trasversale del contenitore Flex. Può essere “flex-start” (allineamento all’inizio), “flex-end” (allineamento alla fine), “center” (centrato), “baseline” (allineamento con la linea di base del testo) o “stretch” (tutti gli elementi vengono estesi per riempire tutto lo spazio disponibile).
7. align-self: specifica l’allineamento di un elemento figlio lungo l’asse trasversale del contenitore Flex. Può essere “auto” (l’elemento eredita l’allineamento dal contenitore), “flex-start” (allineamento all’inizio), “flex-end” (allineamento alla fine), “center” (centrato), “baseline” (allineamento con la linea di base del testo) o “stretch” (l’elemento viene esteso per riempire tutto lo spazio disponibile).
8. align-content è una proprietà di Flexbox in CSS che controlla la distribuzione dello spazio extra lungo l’asse trasversale del contenitore Flex quando ci sono più righe o colonne di elementi figli. Questa proprietà ha effetto solo quando gli elementi figli sono avvolti su più righe o colonne tramite la proprietà flex-wrap. La proprietà align-content può essere utilizzata per specificare come viene distribuito lo spazio extra lungo l’asse trasversale del contenitore Flex. I valori ammissibili per questa proprietà includono:
   
   • flex-start: gli elementi figli vengono allineati all’inizio del contenitore Flex.
   • flex-end: gli elementi figli vengono allineati alla fine del contenitore Flex.
   • center: gli elementi figli vengono centrati lungo l’asse trasversale del contenitore Flex.
   • space-between: gli elementi figli vengono distribuiti uniformemente lungo l’asse trasversale del contenitore Flex, con spazi vuoti tra di essi.
   • space-around: gli elementi figli vengono distribuiti uniformemente lungo l’asse trasversale del contenitore Flex, con spazi vuoti sia tra di essi che sui lati esterni del contenitore.
   • stretch: tutti gli elementi figli vengono estesi per riempire tutto lo spazio disponibile lungo l’asse trasversale del contenitore Flex.
9. order: specifica l’ordine di visualizzazione di un elemento figlio all’interno del contenitore Flex. Gli elementi figli con un valore inferiore di order vengono visualizzati prima di quelli con un valore maggiore o nessun valore.
10. flex-grow: specifica quanto un elemento figlio può espandersi all’interno del contenitore Flex in base allo spazio disponibile. Più alto è il valore, maggiore sarà la proporzione dello spazio extra che l’elemento figlio occupa.
    
11. flex-shrink: specifica quanto un elemento figlio può ridursi all’interno del contenitore Flex in caso di mancanza di spazio disponibile. Più alto è il valore, maggiore sarà la riduzione dell’elemento figlio in proporzione agli altri.
12. flex-basis: specifica la dimensione base di un elemento figlio prima di essere espanso o ridotto in base a flex-grow e flex-shrink. Può essere specificato come valore numerico o come una delle parole chiave “auto” (dimensione automatica) o “content” (dimensione del contenuto).
13. flex: una proprietà abbreviata che combina flex-grow, flex-shrink e flex-basis in una sola dichiarazione.

Questi sono tutti i selettori di Flexbox in CSS. Utilizzando queste proprietà insieme, è possibile creare layout flessibili e reattivi con un minimo di codice.