Flex: i layout CSS del futuro?

Articolo CSS Flex Layout - Testata - Roberto Mannelli per webhouseit.com
Tempo stimato di lettura: 6 minuti, 38 secondi
Pubblicato il 4 febbraio 2015

Finalmente i CSS3 ci propongono flex, un sistema di gestione dei layout potente e flessibile, con tante luci e qualche ombra…

Procediamo con ordine

Chiunque abbia un po’ di esperienza con i CSS, sa bene quali sono i limiti ed i problemi imposti dalla tecnica del floating. D’altra parte il floating non era stato pensato per la gestione dei layout, ovvero non come sistema per cambiare posizione agli elementi, ma come sistema per “rimpiazzare” l’attributo align degli elementi <img>.

Quando i CSS hanno consentito di abbandonare le tabelle per la gestione dei layout, il float è diventato un male necessario, in quanto non esisteva un meccanismo pensato per consentire ad un designer di “giocare” con i box, spostandoli a piacimento per creare layout diversi, a prescindere dal markup di partenza.

Un passo avanti

A partire dai CSS 2.1, l’introduzione del display:table ha permesso un balzo in avanti, consentendo di utilizzare una visualizzazione in stile tabella per realizzare layout complessi ma senza il problema del clearing, tipico del float.

Anche il display:table presenta tuttavia alcuni limiti (di cui però non parlerò perché non rientra negli obiettivi di questo articolo).

Flexible Layout, la soluzione definitiva?

La genesi dei flex layout è piuttosto complicata: la prima versione risale addirittura al 2009 e da allora i flexible layout hanno cambiato pelle più volte.

Se le precedenti versioni erano promettenti ma acerbe (anche per problemi di prestazioni), quella attuale sembra decisamente migliorata, potente e discretamente veloce (anche se i table layout sembrano più veloci).

Siamo dunque di fronte alla soluzione definitiva al problema della gestione dei layout? Vediamo…

Iniziamo…

Il primo passo da compiere è quello di applicare al contenitore una regola con display: flex (erano rispettivamente display: box e display: flexbox nelle due precedenti versioni).

Tutti gli esempi che farò d’ora in poi in questo articolo verranno applicati a questo markup:

Al quale aggiungiamo un paio di righe di CSS (ometto per brevità le regole di formattazione pura e semplice, come caratteri, colori, ecc…)

Questo è l’aspetto iniziale:

Articolo CSS Flex Layout - Aspetto iniziale - Roberto Mannelli per webhouseit.com

Aspetto iniziale

Il primo passo per iniziare ad usare i flexible layout sarà dunque:

Risultato:

Articolo CSS Flex Layout - Primo passo - Roberto Mannelli per webhouseit.com

Primo passo

Per default i box non sfruttano lo spazio a disposizione, ma si limitano ad occupare lo spazio minimo indispensabile per rendere visibile il contenuto. Rimediamo subito utilizzando la proprietà flex-grow, che si aspetta un valore numerico che indica la porzione di spazio a disposizione.

Nell’esempio che segue, #sponsor avrà una dimensione doppia di #news, mentre #content una dimensione tripla sempre rispetto a #news. Trattandosi di un layout fluido, le dimensioni verranno ricalcolate in base alla dimensione del viewport.

Risultato:

Articolo CSS Flex Layout - flex-grow - Roberto Mannelli per webhouseit.com

La proprietà flex-grow

Uno degli aspetti interessanti (ma non l’unico) dei flex sta nella possibilità di modificare molto facilmente l’ordine degli elementi:

Risultato:

Articolo CSS Flex Layout - flex-grow - Roberto Mannelli per webhouseit.com

La proprietà order

Facile, vero? 😉

Un’altra interessante proprietà consente invece di cambiare l’orientamento del flusso: si tratta di flex-direction, che può assumere i valori row, row-reverse, column, column-reverse.

Il valore row è il predefinito, mentre con il valore column i box verranno disposti in colonna anziché in riga, rispettando order e flex-grow espressi in precedenza (quest’ultimo a patto di aver specificato una height per il contenitore):

Risultato:

Articolo CSS Flex Layout - flex-direction - Roberto Mannelli per webhouseit.com

La proprietà flex-direction

Gli altri due valori disponibili per la proprietà flex-direction consentono di invertire la direzione del flusso.

Layout a riga singola / multipla: flex-wrap

Un flex container, per default, cerca di mantenere tutti i suoi elementi figli in una singola riga. E’ tuttavia possibile decidere di modificare questo comportamento sfruttando la proprietà flex-wrap: vediamo come funziona…

Per cominciare, inseriamo la proprietà flex-wrap nella regola del selettore #container (flex-wrap si applica al contenitore flex). I valori possibili sono:

  • nowrap: è il valore di default ed impone che gli elementi figli rimangano su un’unica riga
  • wrap: gli elementi possono essere separati in più righe se necessario
  • wrap-reverse: gli elementi possono essere separati in più righe se necessario ed il loro ordine è invertito rispetto all’ordine originale

Aggiungiamo quindi due proprietà nella regola con il selettore che include tutti gli elementi figli del contenitore flex:

  • flex-grow: 1;
  • min-width: 300px;

Risultato:

  • Se la “larghezza utile” è pari o superiore ai 900px (3*300px), il layout si presenta in questo modo:
Articolo CSS Flex Layout - flex-wrap - Roberto Mannelli per webhouseit.com

La proprietà flex-wrap

  • Se la “larghezza utile” scende sotto i 900px (3*300px), il layout si presenta in questo modo:
Articolo CSS Flex Layout - flex-wrap - Roberto Mannelli per webhouseit.com

La proprietà flex-wrap

Suggerimento: Questo è solo uno dei modi per sfruttare flex-wrap per ottenere la “suddivisione” degli elementi in più righe… prova, ad esempio, a sostituire flex-grow: 1 con width: 33%.

Distribuzione degli elementi in una riga: justify-content

Supponiamo adesso di dover posizionare elementi a dimensione fissa all’interno di un contenitore con dimensione superiore o addirittura variabile: la proprietà justify-content ci consente di scegliere come distribuire gli elementi figli. I valori ammessi sono:

  • flex-start: è il valore di default e posiziona gli elementi a partire da sinistra, mantenendoli ravvicinati
  • flex-end: posiziona gli elementi a partire da destra, mantenendoli ravvicinati
  • center: posiziona gli elementi al centro, mantenendoli ravvicinati
  • space-between: il primo elemento viene posizionato a sinistra, l’ultimo a destra e lo spazio residuo (differenza tra la larghezza del contenitore e la somma delle larghezze degli elementi figli) viene distribuito tra gli altri elementi
  • space-around: lo spazio residuo viene diviso per il numero di margini (n. di elementi * 2), quindi applicato ad ogni margine

Esempi:

Risultato:

Articolo CSS Flex Layout - justify-content - Roberto Mannelli per webhouseit.com

La proprietà justify-content

Sostituiamo adesso justify-content: space-between con justify-content: space-around

Risultato:

Articolo CSS Flex Layout - justify-content - Roberto Mannelli per webhouseit.com

La proprietà justify-content

Posizionamento verticale degli elementi: align-items

Se gli elementi figli di un contenitore flex hanno altezze diverse tra loro e comunque inferiori a quelle del contenitore, la proprietà align-items (da applicare al contenitore) ci permette di stabilire il posizionamento degli elementi.

I valori ammessi sono:

  • stretch: è il valore di default ed impone lo stretch verticale degli elementi per fare in modo che l’altezza sia uguale a quella del contenitore
  • flex-start: gli elementi vengono allineati al bordo superiore del contenitore. L’eventuale spazio residuo rimarrà sotto agli elementi
  • flex-end: gli elementi vengono allineati al bordo inferiore del contenitore. L’eventuale spazio residuo rimarrà sopra agli elementi
  • center: gli elementi verranno allineati verticalmente al centro del contenitore
  • baseline: gli elementi verranno allineati sulla linea di base del testo contenuto in essi

Risultato:

Articolo CSS Flex Layout - align-items - Roberto Mannelli per webhouseit.com

La proprietà align-items

Sostituiamo align-items: center con align-items: flex-start

Articolo CSS Flex Layout -align-items - Roberto Mannelli per webhouseit.com

La proprietà align-items

Adesso puoi procedere in autonomia, testando i risultati con gli altri valori.

Conclusioni

Abbiamo esplorato quasi tutte le proprietà che ruotano intorno ai flex layout e ritengo che quanto visto sia più che sufficiente per intuire le potenzialità dello strumento e con un po’ di creatività e di fantasia le possibilità sono davvero notevoli.

A mio modo di vedere può rappresentare la “luce in fondo al tunnel”, dopo anni di layout creati esclusivamente con il float (o quasi…).

Ma è tutto oro ciò che luccica? Purtroppo, come al solito, no… 🙁

Il problema principale dei flex layout è lo scarso supporto da parte dei browser meno recenti (come sempre il problema è rappresentato principalmente da IE e dalla frammentazione delle sue installazioni).

Dato che il supporto da parte dei browser cambia costantemente, ti consiglio di dare un’occhiata qui: http://caniuse.com/#search=flex

Un altro problema è secondo me dato dalla scarsa uniformità dei nomi delle proprietà e dalla complessità generale del sistema, la cui curva di apprendimento è piuttosto ripida.

E tu cosa ne pensi?

Se vuoi saperne di più: http://www.w3.org/TR/css3-flexbox/

  • xeninweb

    Sembra che il supporto dei browser sia lo stesso del float. Tutto sommato credo sia già utilizzabile, almeno che ci sia necessità di creare un sito per ie<10

    • Ciao,
      il supporto al float è totale ormai da tempo, mentre il flex è supportato da IE11 in poi… gli altri browser, ovviamente, non hanno problemi 😉
      Purtroppo IE10 (che supporta la vecchia sintassi, quindi è utilizzabile ma richiede del CSS specifico) ed IE9 sono ancora piuttosto usati…
      Come ho scritto in risposta ad un altro commento, un polyfill aggiornato sarebbe la soluzione, ma non mi risulta che ce ne siano. Se ne trovate uno, condividete! Mi piacerebbe riprendere FLEXIE, un progetto che sembra abbandonato ed aggiornarlo, ma temo che non troverò mai il tempo per farlo. 🙁

  • Filippo

    Una guida molto utile! Grazie

  • Daniele Pavinato

    L’articolo è fantastico. È, tuttavia, un peccato per il troppo poco supporto a questa regola di stile, poiché prevedo qualche anno prima che diventi la sostituta ufficiale del float o del display:table…

    • Ciao Daniele, grazie mille!
      La situazione non è poi così difficile, però IE10 ha un supporto parziale (supporta la vecchia sintassi, quindi richiede regole specifiche), mentre IE9 non sa neanche cosa siano… 🙂
      In rete c’è un polyfill che però non è più stato aggiornato a quanto pare (si chiama FLEXIE)… sarebbe bello riprenderlo ed aggiornarlo alla nuova sintassi. 😉

  • Ciao Roberto, grazie dell’articolo lo salvo tra i preferiti che tanto prima o poi i browser lo supporteranno! Ho consultato anche il file che mi avevi lasciato al corso fatto con te due anni fa ed infatti la regola era display:box e box-ordinal-group anziché order

    • Ciao Mara, grazie a te! 🙂
      Come ho scritto in risposta ad altri commenti, il problema è IE9, visto che con IE10 te la puoi cavare scrivendo regole in “vecchio stile”…
      Tutti gli altri browser sono ok… occhio solo a SAFARI, che richiede il prefisso -webkit- nelle proprietà.

      • Appunto ti stavo chiedendo se era necessario il prefisso! Quindi solo con SafarI! Grazie

        • Prego, figurati! Questo è quanto riportato su caniuse… ammetto di non averli testati tutti (e di non averne intenzione per il momento) 🙂

          • Gaetano Miccio

            se si sviluppa con uno strumento tipo PHPstorm o WebStorm basta installare l’autoprefixer e fa tutto lui 🙂

  • Gaetano Miccio

    Ottimo articolo, seguo da un po’ la vicenda flex e purtroppo la questione IE è tanto seria quanto frustrante. Secondo me non è possibile integrare la tecnologia dato che la fetta di mercato che usa ie 8 – 9 e 10 è ancora troppo ampia. Credo che tocchi attendere un altro annetto almeno prima di poter sviluppare e vendere un sito con layout flex.

    • Ciao Gaetano, grazie per il commento!
      Purtroppo IE è frustrante a prescindere da FLEX! 😉
      Non lo dico per partito preso o solo perché IE sia inferiore agli altri (ci sarebbe da discuterne all’infinito), ma per un dato oggettivo: IE è l’unico browser che non supporta l’upgrade automatico e spesso è legato al’OS dell’utente. Questo provoca una frammentazione esagerata ed un enorme ritardo nell’aggiornamento dei browser, problema praticamente sconosciuto agli altri browser.
      Possiamo solo “ringraziare” MS per questa ed altre scelte che di fatto hanno rallentato lo sviluppo del web (e continuano a farlo!).
      A parte queste amare considerazioni, le statistiche(*) fortunatamente dicono che IE ormai è intorno al 16%-17%. Analizzando meglio con statcounter (e sperando che i dati siano attendibili…), notiamo che IE9 è quasi scomparso e che IE8 è intorno al 2%. Ovviamente non possiamo ignorare il problema (anche perché spesso le statistiche considerano il volume di traffico ed anche questo discorso andrebbe approfondito e non poco).
      Considerando però che IE10 supporta la vecchia sintassi flexbox (quindi richiede del codice CSS scritto ad-hoc, ma può essere utilizzato), forse potremmo anche prendere coraggio ed iniziare ad usare questi layout che hanno qualcosa di magico. Confesso però di non averne ancora avuto a sufficienza! 🙂

      *: ho utilizzato w3counter e statcounter ed ho ristretto i dati all’Italia, ma i dati sono simili nel resto del mondo

      • Gaetano Miccio

        Mi trovo con l’analisi e anche con le considerazioni. Flex è molto interessante ma il supporto con il 10 è minimo e scrivere ad hoc significa quasi raddoppiare i tempi di sviluppo. In ottica cliente significa dover aumentare il costo del preventivo. Per cui inevitabilmente la scelta ricade sui Float gestendo qualche piccolo limite. Poi ovviamente cerchi di evitarli in fase di creazione delle bozze 😉

        • Ci toglieremo dai piedi anche IE 10, prima o poi… 🙂
          Poi ci ritroveremo a discutere di problemi simili con future implementazioni e novità, tanto la storia si ripete.
          “Fortunatamente” (si fa per dire) anche il W3C è tremendamente lento a causa delle troppe “teste” e dei troppi interessi.

  • Giuseppe

    Sebbene sono un pò Device-Agnostic volevo chiederti una tua opinione, in quanto parli di “futuro”.
    Si parla sempre del layout flex perchè si pensa a uno schermo che può diventare bello piccolo piccolo… MA cosa fare con un display molto ampio ?
    Motivo per chi volevo chiederti : cosa ne pensi del max-weight ? Che osservando alcuni siti molto famosi ( facebook ad esempio) sembrano averlo inserito (intorno ai 980px). Dici che è bene inserirlo ?
    Io penso sempre a quegli schermi enormi, che con un max-weight di 980px su una risoluzione di 2500px può sembrare piuttosto brutto… Infatti altri siti (soprattutto guardando l’ormai diffusissimo stile Bootstrap) evitano di mettere un max-weight e avere una visualizzazione al 100% di larghezza.
    Che ne pensi ?

    • Ciao,
      wow… risposta lunga ed articolata. 🙂

      I flex non sono necessariamente connessi all’ampiezza del display: i layout responsive esistono da tempo anche se attualmente vengono utilizzati i floating o i layout tabulari (con i CSS, ovviamente…) per gestire la posizione gli elementi dell’interfaccia.
      Flex consentirà (non appena sarà possibile utilizzare tranquillamente questa tecnologia) di gestire la posizione degli elementi in modo più semplice e più potente.

      Quando scrivi “max-weight” immagino che tu in realtà intenda “max-width”, ovvero larghezza massima e non “peso massimo”… 🙂
      Qui però ci sarebbe da fare un discorso lunghissimo. 🙁
      Esistono svariate tecniche per gestire la larghezza del layout, ma innanzitutto occorre distinguere tra siti con layout a dimensione fissa, layout liquidi e layout responsive.

      In sintesi: FB ha un layout a dimensione fissa, quindi la larghezza non cambia mai al variare delle dimensioni del viewport (l’area visibile utile del tuo browser). Prova a ridimensionare il browser e vedrai…
      Twitter, invece (lo cito perché hai parlato di bootstrap, che è stato creato da twitter), ha un layout responsive: se restringi il browser vedrai che ad un certo punto la colonna di destra passa a sinistra.
      Sfruttare in pieno la dimensione del viewport è quindi possibile già oggi creando un layout responsive, ma non è detto che un layout responsive sia necessariamente pensato per occupare tutta la larghezza a disposizione: si tratta di una scelta progettuale.
      Per occupare tutto il monitor occorre creare interfacce che possano risultare esteticamente gradevoli a qualunque risoluzione… te l’immagini FB esteso a 1900px? La maggior parte dei post starebbe su una riga sola, rendendo i post stessi poco evidenti e leggibili. In quel caso si tratterebbe di ripensare completamente il layout.
      Spero di essere stato chiaro, ho scritto la risposta un po’ velocemente… 🙂

      • Giuseppe

        si, scusa, intendevo max-width (max-weight non avrebbe senso, del resto).
        La tua risposta è senza dubbio soddisfacente, sebbene non mi è chiara la tua opinione se vedi come “futuro del layout” i siti in stile Twitter/Bootstrap (ormai quasi troppo diffusi) che prendono tutte la larghezza dello schermo (forse decisamente più moderni) o a larghezza-fissa (quindi inserendo un max-width) pur rischiando un risultato estetico dubbio su schermi molto ampi ma più “controllato” su schermi medi (al di là dell’aspetto responsive. Non mi ero reso conto che FB non fosse responsive).
        Comprendo che non è possibile approfondire questo discorso qui, in un semplice commento. Comunque grazie!

        • Ciao,
          forse non sono riuscito a spiegarmi bene…
          Personalmente non credo che nel futuro ci sarà una netta predominanza del full-width rispetto al fixed-width o viceversa.
          Secondo me le discriminanti continueranno ad essere la tipologia dei contenuti del sito e le preferenze personali dei designer.
          D’altra parte i layout full-width esistevano ben prima di Bootstrap ed anche prima dei layout responsive.
          Spero di aver risposto alla tua domanda.
          Grazie e buona giornata

          • Giuseppe

            Risposta completa. Grazie di tutto.
            Saluti

          • Figurati… grazie a te.

  • Giuseppe

    Bellissimo articolo! visto che però flex non è supportato dalle vecchie versioni di internet explorer e da safari… potresti suggerirmi un modo per ottenere lo stesso risultato (dare 1 ordine ai div) magari attraverso l’uso dei float? Grazie

    • Grazie per il commento!
      Le soluzioni attualmente applicabili per la gestione delle colonne sono rappresentate dal floating e dall’utilizzo di sistemi di gestione del layout come Bootstrap.
      Purtroppo nessuna delle due soluzioni è paragonabile ai flex layout in quanto a flessibilità, comodità ed eleganza.
      Ovviamente però non posso fare una trattazione estesa sul floating in questa risposta, quindi ti consiglio, se non conosci bene la tecnica, di cercare un buon articolo sul floating e soprattutto di fare un po’ di test, perché il floating è molto insidioso e rischia di creare problemi in alcune situazioni.

  • Vik
Shares