flexbox

Nella prima parte dell’articolo avevamo discusso del Box Sizing, un’interessante proprietà che ci consente di includere padding e bordi alla dimensione di un elemento, risparmiandoci quindi “la fatica” di dover operare calcoli di sottrazione al fine di far apparire un elemento esattamente delle larghezza e altezza da noi specificate. Se hai trovato utile la novità del Box Sizing, probabilmente quella del Flexbox ti farà ancora più gola. Essa rappresenta infatti con tutta probabilità il futuro dell’impaginazione, il nuovo modo di strutturare i web layouts.

Nel corso del tempo questo compito è stato affidato a proprietà sempre più moderne, spesso non progettate allo scopo primario di definire un layout, basta pensare al floating oppure al posizionamento degli elementi.

Flexbox: quali vantaggi ci offre?

Adesso, grazie al Flexbox, abbiamo l’opportunità di gestire in modo semplice e immediato i box all’interno di un contenitore. Esso infatti ci fornisce una maniera più efficiente per organizzare, allineare e distribuire lo spazio tra gli elementi, anche nel caso in cui la loro dimensione sia sconosciuta o dinamica (da qui il termine flex).

L’idea principale dietro questa proprietà sta nel conferire al contenitore l’abilità di alterare i suoi elementi (altezza, larghezza e ordine) per riempire al meglio lo spazio disponibile. Appare quindi chiaro come il Responsive Web Design e il Flexbox vadano decisamente a braccetto (si pensi alla necessità odierna di adattare il layout a qualsiasi tipo di dispositivo e di risoluzione).

Dopo aver descritto in breve il ruolo del Flexbox, vediamo di entrare più nel dettaglio, per comprendere e sfruttare al meglio le sue potenzialità.

Iniziamo col dire in cosa consiste sonstanzialmente il Flexbox, che si compone di contenitori flessibili (flex containers) ed elementi flessibili (flex items).

Proseguiamo specificando che un contenitore flessibile viene dichiarato settando la proprietà display su flex o inline-flex.

Gli elementi flessibili sono disposti all’interno di un contenitore flessibile, lungo una linea flessibile.

Detto questo, non resta che andare ad analizzare le proprietà del contenitore flessibile, e quelle degli elementi flessibili posizionati al suo interno.

Flexbox: le proprietà del contenitore flessibile

flex-direction

Specifica la direzione degli elementi all’interno del contenitore.

  • flex-direction: row; – è il valore di default. Gli elementi si dispongono da sinistra verso destra (a meno che non si setti la proprietà direction su rtl).
  • flex-direction: row-reverse; – gli elementi si dispongono in modo inverso, da destra verso sinistra.
  • flex-direction: column; – gli elementi si dispongono a colonna, dall’alto verso il basso.
  • flex-direction: column-reverse; – gli elementi si dispongono in modo inverso, dal basso verso l’alto.

flex-wrap

Specifica se gli elementi debbano andare a capo o meno nel caso in cui non ci sia abbastanza spazio per loro su un’unica linea.

  • flex-wrap: nowrap; – è il valore di default. Gli elementi non andranno a capo.
  • flex-wrap: wrap; – gli elementi andranno a capo, se necessario.
  • flex-wrap: wrap-reverse; – gli elementi andranno a capo, se necessario, ma nell’ordine inverso.

justify-content

Allinea orizzontalmente gli elementi quando questi non utilizzano tutto lo spazio a loro disposizione sull’asse principale.

N.B: l’asse principale non è necessariamente quello orizzontale, poichè esso dipende dal valore assegnato alla proprietà flex-direction.

  • justify-content: flex-start; – gli elementi vengono posizionati all’inizio del contenitore.
  • justify-content: flex-end; – gli elementi vengono posizionati alla fine del contenitore.
  • justify-content: center; – gli elementi vengono posizionati al centro del contenitore.
  • justify-content: space-between; – gli elementi vengono posizionati con dello spazio tra di loro.
  • justify-content: space-around; – gli elementi vengono posizionati con dello spazio prima, tra, e dopo di loro.

align-items

Allinea verticalmente gli elementi quando questi non utilizzano tutto lo spazio a loro disposizione sull’asse perpendicolare.

  • align-items: stretch; – gli elementi si “stirano” per riempire il contenitore.
  • align-items: flex-start; – gli elementi vengono posizionati all’inizio del contenitore (in alto).
  • align-items: flex-end; – gli elementi vengono posizionati alla fine del contenitore (in basso).
  • align-items: center; – gli elementi vengono posizionati al centro del contenitore (verticalmente).
  • align-items: baseline; – gli elementi si dispongono secondo il loro allineamento di riferimento.

align-content

È simile alla proprietà align-items, ma invece di allineare gli elementi flessibili, allinea le linee flessibili, quando c’è dello spazio extra sull’asse principale.

N.B: questa proprietà non ha effetto quando è presente un’unica linea di elementi flessibili.

  • align-content: stretch; – è il valore di default. Le linee si “stirano” per riempire lo spazio disponibile.
  • align-content: flex-start; – le linee vengono posizionate all’inizio del contenitore.
  • align-content: flex-end; – le linee vengono posizionate alla fine del contenitore.
  • align-content: center; – le linee vengono posizionate al centro del contenitore.
  • align-content: space-between; – le linee vengono distribuite equamente. La prima si dispone all’inizio del contenitore, mentre l’ultima alla fine del contenitore.
  • align-content: space-around; – le linee vengono distribuite equamente, con uguale spazio attorno ad ognuna di loro.

flex-flow

Si tratta di uno shorthand per le proprietà flex-direction e flex-wrap.

Flexbox: le proprietà degli elementi flessibili

order

Specifica l’ordine di un elemento relativamente al resto degli elementi presenti nello stesso contenitore.

flex-grow

Specifica di quanto un elemento dovrà ingrandirsi rispetto al resto degli elementi presenti nello stesso contenitore. Se assegniamo il valore 1 a tutti gli elementi, essi avranno uguale dimensione. Se assegniamo il valore 2 ad uno di loro, esso sarà grande il doppio rispetto agli altri. Il valore di default è 0.

flex-shrink

Specifica di quanto un elemento dovrà rimpicciolirsi, se necessario, rispetto al resto degli elementi presenti nello stesso contenitore. Il valore di default è 1.

flex-basis

Specifica la dimensione iniziale di un elemento, prima che lo spazio rimanente venga distribuito. Il valore di default è auto, dove la dimensione dell’elemento è uguale a quella dell’elemento stesso. Se per quest’ultimo non viene specificata una dimensione, essa dipenderà dal contenuto dell’elemento.

align-self

Consente all’elemento a cui viene applicata di annullare la proprietà align-items del contenitore. Esso si disporrà quindi indipendentemente dal valore che abbiamo impostato per quest’ultima. I valori di align-self sono gli stessi della proprietà align-items.

flex

Si tratta di uno shorthand per le proprietà flex-grow, flex-shrink e flex-basis.

Come puoi vedere c’è davvero tanta carne al fuoco, tante proprietà interessanti degne di essere esplorate a fondo per sfruttare al massimo le notevoli potenzialità del Flexbox.

Ti rallegrerà inoltre sapere che il Flexbox è supportato da tutti i maggiori browsers, quindi non abbiamo più scusanti per rimandare il suo studio.

Se dopo aver letto quest’articolo non hai ancora le idee del tutto chiare non ti preoccupare, visto che ho preparato per te una demo HTML/CSS dove potrai vedere le proprietà del Flexbox messe in pratica, e sperimentare a tuo piacimento qualsiasi soluzione. Buon divertimento!

Download

Live Demo

Share: