Flexbox o non flexbox? Sono diversi anni che molti di noi si chiedono quando sia arrivato il momento di utilizzarlo in produzione, e non c’è ombra di dubbio che quel tempo sia finalmente giunto. Caniuse ci dice infatti che il 97% dell’utenza internet ha un dispositivo (desktop o mobile) che lo supporta.
Se nel corso degli anni la sintassi ha subito diversi cambiamenti, oggi, grazie anche all’uso più diffuso di sistemi di compilazione automatizzata (nello specifico autoprefixer) è possibile garantire un supporto quasi totale. Tuttavia, come ogni nuova tecnica offerta dai CSS, è bene non abusarne. Vediamo quindi ora le 3 funzionalità per cui flexbox è indispensabile e risolve facilmente problemi “storici” che ogni webdesigner si è trovato a fronteggiare.
Per una guida completa su flexbox vi consiglio di leggere questa ottima guida di CSS Tricks: A Complete Guide to Flexbox.
Altezze uguali degli elementi
Uno dei casi storici in cui è sorta la necessità di avere la stessa altezza tra due elementi, riguarda la combinazione sidebar+contenuto. Nell’esempio sottostante infatti, per poter ottenere la medesima altezza tra le due parti, era necessario avvalersi di javascript. Attraverso flexbox è sufficiente dichiarare display:flex all’elemento contenitore (per esempio il main che contiene sidebar e contenuto) ed i due elementi figli avranno automaticamente la medesima altezza.
Questo esempio ci porta immediatamente ad analizzare un’altra situazione di uso comune.
Prendete una serie di elementi ripetuti (con float o inline-block abitualmente) che, pur presentando contenuti con lunghezza differente, abbiamo la stessa altezza. Anche in questo caso era necessario dichiarare un’altezza fissa comune, oppure una min-height o trovare l’elemento più alto in javascript ed assegnare a tutti la sua altezza. Questo presentava la necessità di dover gestire i vari casi responsive cambiando le altezze.
Tutto ciò non è più necessario, infatti, come abbiamo visto nell’esempio sopra, la stessa proprietà può essere applicata al nuovo caso.
Tuttavia, come si vede dall’esempio, occorre sistemare qualcosa. Dovremo introdurre una nuova proprietà, chiamata flex-wrap, e dovremo assegnarle l’attributo wrap. Di default infatti flexbox mette tutti gli elementi su di una linea. Attraverso flex-wrap:wrap diciamo invece di andare a capo su più righe in modo che i contenuti occupino lo spazio necessario richiesto:
Riordinamento degli elementi
Ci sono due casi in cui abitualmente occorre poter cambiare l’ordine degli elementi rapidamente.
- Per finalità SEO, quando si vuole che un testo venga letto “prima” dallo spider
- Quando su mobile si vuole che un’elemento che a codice viene “prima”, venga spostato visivamente dopo o viceversa
Flexbox offre una comodissima soluzione. Attraverso la proprietà order, dichiarata ad un elemento figlio, si definisce il numero di posizione in cui dovrà apparire.
Nel caso sopra potremo quindi, per esempio, decidere di cambiare l’ordine visivo su mobile. Nello specifico vediamo anche come sia possibile passare da un ordine orizzontale ad uno verticale, utilizzando la proprietà flex-direction.
Allineamenti nel “vuoto”
Per concludere, flexbox diventa irrinunciabile quando vogliamo allineare rapidamente un elemento sia verticalmente che orizzontalmente rispetto al contenitore (NB: il contenitore deve avere delle dimensioni o comunque occupare uno spazio fisico per poter contenere elementi allineati). Per farlo occorre assegnare al contenitore le proprietà align-items: center e justify-content:center che allineano gli elementi figli rispettivamente in orizzontale e verticale. All’elemento figlio potrete assegnare una larghezza massima a piacere.
Queste sono le 3 situazioni principali in cui mi è capitato di imbattermi quotidianamente e che hanno trovato beneficio dall’arrivo di flexbox.
