Il modulo CSS3 Flexbox: un nuovo modo di disporre e allineare gli elementi in un contenitore

Il modulo CSS3 Flexible Box Layout (Flexbox) mira a fornire un modo più efficiente e semplice per disporre, allineare e distribuire lo spazio tra gli elementi in un contenitore, anche quando la loro dimensione è sconosciuta e /o dinamica.

L'idea principale del flex layout è la capacità di alterare la larghezza e/o l’altezza dei suoi elementi (e l’ordine) per occupare meglio lo spazio disponibile su qualsiasi dispositivo di visualizzazione. Un contenitore flessibile espande i suoi elementi per riempire lo spazio libero disponibile, o li restringe per evitare l’overflow.
La figura sottostante, presa direttamente dalla specifica del W3C, spiega l'idea principale dietro il layout flessibile.

css3 flexible box layout scheme



Flexbox è un intero modulo e non una singola proprietà e introduce una nuova terminologia. Alcune proprietà devono essere impostate sul contenitore (elemento padre, flex container), mentre le altre sono destinate ad essere impostate su gli elementi figli ( flex items).

Flex container
Il Flex container è l’elemento padre in cui gli elementi flessibili (flex items) sono contenuti. Il flex container è definito usando i valori flex o inline-flex per la proprietà display.

Flex items
Ogni figlio di un elemento contenitore diventa un elemento flessibile.

Proprietà
Possiamo dividere le proprietà in due categorie, quelle da applicare all’elemento contenitore e quelle da applicare agli elementi figli.

Prorpietà da applicare all’elemento contenitore:

display: flex | inline-flex

Utilizzando questa proprietà e quindi un layout flessibile non saranno utilizzabili le proprietà di float, clear e le proprietà delle colonne.

flex-direction: row | row-reverse | column | column-reverse

Questa proprietà stabilisce l’asse principale, definendo la direzione degli elementi figli all’interno del contenitore.

row: è il valore di default, dispone gli elementi da sinistra a destra

row-reverse: dispone gli elementi da destra a sinistra

column: allinea gli elementi in verticale dall’alto al basso

columen-reverse: allinea gli elementi dal basso all’alto

flex-wrap: nowrap | wrap | wrap-reverse

Questa proprietà definisce se gli elementi all’interno del contenitore si disporranno su una singola riga o su più linee in base allo spazio disponibile.

nowrap: è il valore di default, posiziona gli elementi su un’ unica riga non tenendo conto della larghezza impostata degli elementi.

wrap: quando lo spazio disponibile è finito posiziona gli elementi su più righe, da sinistra a destra. Mantiene la larghezza degli elementi.

wrap-reverse: dispone gli elementi su più linee da destra a sinistra.


flex-flow : <‘flex-direction’> || <‘flex-wrap’>

Flex-flow è una proprietà a sintassi abbreviata con cui definire insieme i valori di flex-direction e flex-wrap

justify-content: flex-start | flex-end | center | space-between | space-around

Questa proprietà definisce l’allineamento lungo l’asse principale. Aiuta a distribuire lo spazio libero quando tutti gli elementi hanno raggiunto la loro dimensione massima.

flex-start: è il valore di default, gli elementi vengono posizionati a sinistra.

flex-end: gli elementi vengono posizionati a destra.

center: gli elementi sono disposti centralmente.

space-between: gli elementi sono distribuiti lungo tutto il contenitore, il primo e l’ultimo elemento saranno rispettivamente in corrispondenza al main start e al main end.

space-around: gli elementi sono distribuiti lungo il contenitore con uno spazio circostante uguale.


align-items: flex-start | flex-end | center | baseline | stretch

Questa proprietà definisce il posizionamento degli elementi lungo l’asse verticale

flex-start: gli elementi vengono posizionati in corrispondenza del cross start.

flex-end: gli elementi vengono posizionati in corrispondenza del cross end.

center: gli elementi sono posizionati centralmente lungo l’asse verticale.

baseline: L'elemento con la più grande distanza tra il cross start e la relativa linea di base è quello che determina la linea di allineamento.

stretch: è il valore di default, gli elementi assumono l’altezza del loro contenitore.


align-content: flex-start | flex-end | center | space-between | space-around | stretch

Questa proprietà distribuisce gli elementi disposti su più linee lungo l’asse verticale. Questa proprietà è come justify-content ma gli elementi sono distribuiti sull’asse verticale.

flex-start: gli elementi vengono posizionati in corrispondenza del cross start.

flex-end: gli elementi vengono posizionati in corrispondenza del cross end.

center: gli elementi sono posizionati centralmente lungo l’asse verticale.

space-between: gli elementi sono distribuiti lungo tutto il contenitore, il primo e l’ultimo elemento saranno rispettivamente in corrispondenza al cross start e al cross end.

space-around: gli elementi sono distribuiti lungo il contenitore con uno spazio circostante uguale.



Le proprietà da applicare al contenitore sono finite, possiamo passare a quelle da applicare a elementi contenuti.

Proprietà da applicare agli elementi contenuti

order: di default è l’ordine originale impostato nell’html

Questa proprietà dà la possibilità di ordinare gli elementi all’interno del contenitore.

flex-grow: <numero> di default è 0

Questa proprietà consente di impostare la larghezza di un elemento in modo proporzionale rispetto agli altri.

Se impostiamo a gli elementi flex-grow uguale a 1, tutti saranno di dimensioni uguali, se a uno di questi impostiamo flex-grow uguale a 2 questo occuperà il doppio dello spazio rispetto a gli altri.

flex-shrink: <numero>

Questa proprietà è l’opposto di flex-grow, determina la riduzione degli elementi in modo proporzionale.

flex-basis: <length> | auto (default auto)

Consente di specificare la dimensione principale degli elementi.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Proprietà a sintassi abbreviata per flex-grow, flex-shrink e flex-basis

align-self: auto | flex-start | flex-end | center | space-between | space-around | stretch

Questa proprietà consente di impostare l’allinemento di ogni elemento sovrascrivendo la proprietà align-items.

Se arrivati a qui non avete capito nulla il sito CSS Flexbox Please vi potrà chiarire un po’ le idee e vi permetterà di prendere maggiore confidenza con questo modulo.

Utilizzando il layout flessibile sarà molto più semplice e veloce creare layout responsive, in questo sito http://philipwalton.github.io/solved-by-flexbox/ è possibile vedere problemi difficili da risolvere con i CSS ma risolti facilmente con i Flexbox.

Vi farà piacere sapere che questo modulo CSS è completamente compatibile con Internet Explorer 11 senza bisogno di inserire i prefissi proprietari, necessari per la versione 10. Anche Safari, nelle versioni 6.1 e 7.0, ha esteso il supporto alla specifica definitiva. In conclusione tutti i principali browser nei loro ultimi aggiornamenti supportano i layout concepiti e realizzati con box flessibili: proprio per questo è il caso di inziare a studiare e a prendere confidenza con questo modulo CSS che, molto probabilmente, negli anni a venire diventerà uno dei modi più utilizzati per la creazione di layout.


Post più popolari