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.
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-flexUtilizzando 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’htmlQuesta 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.
Commenti
Posta un commento