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.

Continua a leggere→