Abbiamo esaminato in un precedente articolo le proprietà base di Flexbox, una delle novità introdotte con CSS3: https://lnx.instantwebsites.it/iwblog/2019/01/introduzione-a-flexbox/
Vedremo ora come utilizzare Flexbox per creare un layout composto a titolo di esempio da 3 colonne affiancate in un contenitore.
Tutti gli esempi che verranno creati possono essere visualizzati aprendo questa pagina e visualizzando il codice sorgente della stessa.
Definiamo un contenitore che identificheremo inizialmente con la classe .box avente sfondo blu e tre colonne che identificheremo con le classi .colonna1, .colonna2 e .colonna3.
Ognuna di queste ultime ha una larghezza di 300px ed ha sfondo colorato differenziato.
Nell’ESEMPIO N. 1, i div .colonna assumono il normale comportamento degli elementi a livello di blocco e si dispongono uno sopra all’altro.
Per affiancarli, potremmo adottare la tecnica basata su: display: table-cell, cambiando la natura di tali elementi (vedi questo articolo: https://lnx.instantwebsites.it/iwblog/2013/02/layout-a-piu-colonne-con-la-proprieta-display-table-cell/) ma usando Flexbox otterremo maggiore flessibilità, potendo anche ridisporre le colonne stesse in un ordine diverso da quello definito dal codice HTML.
Passiamo dunque all’ESEMPIO N. 2 nel quale al contenitore chiamato stavolta .box2 viene assegnata la proprietà display: flex;.
I tre elementi interni si dispongono uno di fianco all’altro, mantenendo le loro dimensioni se lo spazio è sufficiente e riducendole proporzionalmente quando la viewport assume una dimensione insufficiente (per verificare ciò, rimpicciolire la finestra del browser per simulare la viewport di dispositivi più piccoli).
L’ESEMPIO N. 3 si differenzia dal precedente perché assegnamo la proprietà flex-wrap: wrap; al contenitore.
Se c’è sufficiente spazio, le colonne si affiancano e sono dimensionate 300px di larghezza come definito nel CSS.
Se lo spazio non è sufficiente, invece, si dispongono una sopra l’altra sempre conservando la larghezza impostata nel foglio di stile.
Questo comportamento è in qualche modo analogo a quello degli elementi flottanti, ai quali cioè sia assegnata la proprietà float: right; molto usata fino a qualche tempo fa per creare le colonne nei layout non reattivi.
Nell’ESEMPIO N. 4, assegnamo la proprietà: justify-content: space-between; al contenitore (senza flex-wrap: wrap;).
Le tre colonne assumono la larghezza di 300px se lo spazio è sufficiente e, tra loro, viene inserito dello spazio proporzionalmente uguale.
Se lo spazio non è sufficiente, le colonne stesse si ridimensionano in maniera uguale e restano affiancate; lo spazio tra loro si azzera.
Nell’ESEMPIO N. 5 viene invece assegnata la proprietà justify-content: space-evenly; al contenitore.
La differenza rispetto all’esempio precedente è che viene creato anche spazio esterno alle colonne, cioè a sinistra della prima colonna ed a destra della terza colonna.
Questo solo se, ancora una volta, il contenitore delle tre colonne è sufficientemente ampio da consentire alle stesse di avere una larghezza di 300px, altrimenti lo spazio esterno e quello tra le colonne sparisce e queste restano affiancate.
E’ possibile completare ciascuno degli esempi sopra riportati impostando i valori della proprietà flex-direction, a proposito della quale si rinvia al precedente articolo riguardante Flexbox (https://lnx.instantwebsites.it/iwblog/2019/01/introduzione-a-flexbox/).
Infine, l’ESEMPIO N. 6 è analogo al n. 4 ma è stata aggiunta una media query che riporta il box contenitore e le 3 colonne al comportamento di default di blocco, assumendo la larghezza massima disponibile.
Ovviamente gli esempi di cui sopra non completano l’analisi di Flexbox che ci riserviamo di approfondire in un ulteriore, prossimo articolo.