La proprietà flexbox, introdotta con CSS3, costituisce uno strumento molto interessante per gestire lo spazio all’interno di un contenitore anche quando non si conoscano a priori le dimensioni dei box in esso contenuti.

L’aspetto più interessante che differenzia questa soluzione tecnica da quelle alternative (l’uso della proprietà float e della dichiarazione display: table-cell) è che tramite flexbox è possibile riordinare i box cambiandone la disposizione.

Per esaminare ad un primo livello di approfondimento flexbox, procederemo con una serie di esempi.

Inseriamo nella pagina un contenitore largo 450px con (inizialmente) tre box larghi 150px ciascuno, identificati dai numeri 1, 2 e 3 al loro interno.
Al contenitore è stata assegnata la classe .wrapper ed ai tre box al suo interno le classi: .primo, .secondo e .terzo.

Nel primo esempio, così come in quelli che seguono, il contenitore .wrapper ha tra le sue proprietà css la dichiarazione: display: flex; ed i box in esso contenuti assumono il comportamento di default, vale a dire si dispongono uno di fianco all’altro.

E’ possibile cambiare questa disposizione tramite la proprietà flex-direction che assume questi possibili valori: row (default), column, row-reverse e column-reverse.
Nel secondo esempio è stata usata la dichiarazione flex-direction: row-reverse; e nel terzo esempio la dichiarazione flex-direction: column-reverse; facendo sì che i box si dispongano rispettivamente su una riga partendo dall’ultimo e su una colonna, sempre partendo dall’ultimo.

Rendiamo le cose per così dire più interessanti nel quarto esempio, nel quale il contenitore .wrapper non ha una più larghezza fissa mentre i box all’interno sono in numero pari a 8, larghi 400px e distanziati tra loro da un margine pari a 20px.
Di default, gli elementi contenuti in .wrapper si dispongono su una sola riga (esempio nella parte superiore della pagina); assegnando flex-wrap: wrap; al contenitore invece essi si dispongono su più righe rispettando le dimensioni loro assegnate (esempio nella parte inferiore della pagina).
La proprietà flex-wrap può assumere i valori nowrap (default), wrap (gli elementi si dispongono su più righe nel loro ordine originario) e wrap-reverse (gli elementi si dispongono su più righe in ordine inverso di riga).

Passiamo all’ultimo esempio di questa introduzione a flexbox, vale a dire il quinto esempio nel quale utilizziamo ancora la dichiarazione flex-wrap: wrap; per consentire ai box di disporsi su più righe ma impostiamo anche un ordine differente degli stessi nella visualizzazione su viewport più ridotte.
Per fare ciò, utilizziamo la proprietà order che assume valori 1, 2, 3 ecc.; nel caso specifico, tramite una media query, modifichiamo l’ordine dei box quando la viewport abbia una laghezza inferiore o uguale a 600px. E’ sufficiente ridimensionare la finestra del browser per simulare la viewport di un dispositivo mobile e verificare il nuovo ordine dei box.

Da questa breve disamina, che ha analizzato solo una parte delle caratteristiche del layout costruito con flexbox, è già possibile comprendere la sua maggiore duttilità rispetto alle soluzioni tradizionali.
Ciò sarà ancora più evidente dopo avere esaminato le ulteriori caratteristiche in un successivo articolo in questo blog.