CSS Flexbox: più op­por­tu­ni­tà per il web design

Con i Cascading Style Sheets (CSS), “fogli di stile” in italiano, si possono creare siti web ac­cat­ti­van­ti. Mentre l’HTML contiene solo gli elementi base prin­ci­pa­li, con il CSS si può rea­liz­za­re un web design complesso inserendo immagini ac­cat­ti­van­ti, sce­glien­do la modalità di di­spo­si­zio­ne del testo e in­te­gran­do elementi salienti nel sito web. Questo pratico lin­guag­gio di markup viene co­stan­te­men­te svi­lup­pa­to per sem­pli­fi­ca­re il lavoro sui siti web e offrire ai web designer nuove pos­si­bi­li­tà di pro­get­ta­zio­ne. Uno di questi sviluppi è il CSS Flexbox: uno strumento im­por­tan­te per pro­get­ta­re siti web in modo adeguato anche nell’epoca del mobile.

Uno dei compiti prin­ci­pa­li di CSS è inserire tutti gli elementi del sito web in un unico layout definendo nel dettaglio la di­spo­si­zio­ne di testo, immagini e pulsanti. È possibile stabilire la posizione esatta di ogni elemento sullo schermo, ma ciò può fun­zio­na­re cor­ret­ta­men­te solo se se ne conoscono le di­men­sio­ni e le pro­por­zio­ni. La dif­fu­sio­ne dell’Internet mobile con vari tipi di display e pro­por­zio­ni (si pensi agli smart­pho­ne che di solito cambiano il loro orien­ta­men­to quando sono inclinati), ha reso difficile ottenere un risultato con­vin­cen­te con le box rigide so­li­ta­men­te uti­liz­za­te in CSS.

Flexbox (o più pre­ci­sa­men­te CSS Flexible Box Layout) funziona in modo più in­tel­li­gen­te e dinamico: il layout si adatta in modo fles­si­bi­le al display uti­liz­za­to (Re­spon­si­ve Design). Lo spazio viene riempito o gli elementi vengono accostati tra loro in modo che tutto sia chia­ra­men­te visibile. Per fare questo lavoro senza com­pro­met­te­re il layout de­si­de­ra­to, Flexbox lavora con due assi: l’asse prin­ci­pa­le corre in senso oriz­zon­ta­le, l’asse tra­sver­sa­le in verticale. Uti­liz­zan­do questi assi gli elementi possono essere disposti in relazione tra loro all’interno del box. In questo modo vengono dunque ripartiti tutti gli elementi. CSS Flexbox assicura così che lo spazio di questi elementi sia riempito in modo adeguato.

Chi at­tual­men­te progetta siti web dovrebbe conoscere CSS Flexbox: lavorare con schermi di di­men­sio­ni variabili diventa molto più facile grazie a questa tecnica. La funzione è strut­tu­ra­ta in modo tale da poter creare risultati ac­cat­ti­van­ti anche con poche righe di codice.

Flexbox si basa su un container (flex container), che a sua volta contiene diversi elementi (flex items). Il container assegna le sue proprietà agli elementi, ciò vuol dire che gli elementi sono i flexbox effettivi e includono la loro fles­si­bi­li­tà essendo fissati all’interno del container.

I due assi hanno ciascuno una direzione: in genere l’asse prin­ci­pa­le va da sinistra a destra, mentre l’asse tra­sver­sa­le va dall’alto verso il basso. Flexbox è un sistema uni­di­men­sio­na­le: gli elementi possono essere disposti in righe o in colonne. Non è prevista una com­bi­na­zio­ne. Per esempio, se si sceglie la di­spo­si­zio­ne in riga (che è anche lo standard), CSS Flexbox cercherà di or­ga­niz­za­re tutti gli elementi in una riga. Questo si può anche evitare, forzando l’in­ter­ru­zio­ne della linea.

Prima di iniziare a disporre gli elementi è ne­ces­sa­rio crearli come sempre con HTML:

In questo modo i tre elementi sarebbero sem­pli­ce­men­te vi­sua­liz­za­ti uno sotto l’altro. Uti­liz­zan­do il CSS di­stri­buia­mo ora i termini sull’asse prin­ci­pa­le:

In questo foglio di stile per prima cosa è stato definito il container. L’istru­zio­ne “display: flex;” rende possibile il flexbox.

 Gli elementi sono di­stri­bui­ti da sinistra a destra, perché non è stata indicata una di­spo­si­zio­ne diversa. Tuttavia, esistono 5 diverse pos­si­bi­li­tà che possono essere impostate con l'i­stru­zio­ne “justify-content”:

• flex-start: allineato a sinistra
• flex-end: allineato a destra
• center: centrato
• space-around: spazio intorno ai box di­stri­bui­to in modo uniforme
• space-between: spazio tra i box di­stri­bui­to in modo uniforme

Il resto del codice è di natura puramente formale e non ha nulla a che fare con i flexbox reali.

Il CSS pre­sup­po­ne un’or­ga­niz­za­zio­ne oriz­zon­ta­le in Flexbox, ma una di­spo­si­zio­ne degli elementi in colonna è ugual­men­te possibile. Inoltre, si può invertire la direzione, cioè da sinistra a destra o dal basso verso l’alto. A tal fine si utilizza l’istru­zio­ne “flex-direction”:

• row: da sinistra a destra
• row-reverse: da destra a sinistra
• column:: dall’alto al basso
• column-reverse: dal basso all’alto

Il comando “justify-content: flex-end;” non è lo stesso di “flex-direction: row-reverse;”: mentre nel primo caso si posiziona l’ultimo elemento all’estrema destra, nel secondo caso si modifica l’ordine completo. Il primo elemento del codice ap­pa­ri­reb­be quindi all’estrema destra.

Finora abbiamo parlato di di­stri­bu­zio­ne uniforme di flexbox, ma nel web design non sempre si vogliono trattare tutti gli oggetti allo stesso modo: ad esempio un testo potrebbe voler essere vi­sua­liz­za­to in modo diverso da un’immagine. Per rag­giun­ge­re quest’obiettivo, possiamo combinare gli elementi in un testo HTML:

Con “justify-content” è possibile impostare gli elementi sull’asse oriz­zon­ta­le in una certa relazione tra loro. Tuttavia, se si desidera spostare il contenuto dall’alto verso il basso (sull’asse tra­sver­sa­le), è ne­ces­sa­ria l’istru­zio­ne “align-items”. Anche in questo caso, ci sono 5 diverse opzioni:

• center: gli oggetti sono centrati.
• flex-start: gli oggetti sono allineati sul margine superiore.
• flex-end:: gli oggetti sono allineati sul margine inferiore.
• stretch: gli oggetti hanno la stessa altezza del Container.
• baseline: gli oggetti sono disposti sulla linea di base (a seconda del contenuto).

Le due opzioni “flex-start” e “baseline” sembrano dare gli stessi risultati a prima vista. La dif­fe­ren­za diventa par­ti­co­lar­men­te evidente quando gli oggetti vengono annidati: mentre “flex-start” collega solo i due flexbox che si trovano sullo stesso livello ge­rar­chi­co, “baseline” tiene conto anche del contenuto dei box.

Con il seguente codice è quindi possibile disporre tre oggetti di di­men­sio­ni diverse uno accanto all’altro in posizione centrata:

L’espan­sio­ne in senso verticale può essere in­fluen­za­ta anche da in­ter­ru­zio­ni di linea. Se si mettono molti oggetti in un unico container, questi vengono sem­pli­ce­men­te fatti scorrere sempre in oriz­zon­ta­le, in modo che l’utente debba scorrerli e che sia lasciata l’area dello schermo ef­fet­ti­va­men­te prevista. Con “flex-wrap” si possono di­stri­bui­re gli elementi in modo ordinato su più linee.

• nowrap: nessuna in­ter­ru­zio­ne di linea
• wrap: in­ter­ru­zio­ne di linea
• wrap-reverse: in­ter­ru­zio­ne di linea (con di­spo­si­zio­ne in ordine inverso)

Finora la di­spo­si­zio­ne è sempre stata applicata all’intero container. Tutti i box all’interno del container seguono le istru­zio­ni globali. Questo rende il lavoro più facile, ma allo stesso tempo lo limita. CSS Flexbox consente ai web designer la pos­si­bi­li­tà di definire delle eccezioni. A tal fine si usa “order”. Il valore pre­de­fi­ni­to (se non spe­ci­fi­ca­to) è 0. Il valore dell’ordine aggiunge l’oggetto ad un gruppo astratto. Tutti gli elementi che abbiamo creato finora ap­par­ten­go­no allo stesso gruppo perché hanno tutti il valore 0. Partendo da questo valore è ora possibile spostare singoli oggetti in avanti (-1) o indietro (1).

Quindi, se si lasciano tutti gli elementi tranne uno sul valore zero e si dà all’oggetto se­le­zio­na­to il valore 1, questo verrà vi­sua­liz­za­to solo dopo gli altri elementi. Questo pro­ce­di­men­to può essere pro­se­gui­to as­se­gnan­do anche altri valori (più alti o più bassi). Si tratta di una rap­pre­sen­ta­zio­ne puramente visiva: la sequenza logica secondo il documento HTML non viene mo­di­fi­ca­ta.

Finora ci siamo occupati solo della di­spo­si­zio­ne fles­si­bi­le degli oggetti. Nel codice di esempio, le pro­por­zio­ni sono sempre state definite secondo i classici CSS. Tuttavia, i flexbox sono adat­ta­bi­li anche in termini di di­men­sio­ni. A questo scopo viene uti­liz­za­ta l’istru­zio­ne “flex”. Ana­lo­ga­men­te all’ordine, gli elementi possono essere divisi in gruppi. Maggiore è il valore, maggiore è lo spazio richiesto dal ri­spet­ti­vo elemento.