Flexbox è un modulo di CSS3 che permette di gestire box flessibili, uno strumento per il layout rivoluzionario. Con Flexbox, infatti, sarà facilissimo gestire la posizione di un elemento all’interno del suo contenitore.

Il supporto per questo modulo è ancora frammentario; mentre le ultime versioni dei browser lo supportano appieno (es. IE11, Firefox 28 e diverse versioni di Chrome), alcune versioni supportano uno standard più vecchio; come in altri casi, quindi, dovremo indicare varie tipologie di proprietà per questioni di compatibilità.

Il Flexbox funziona creando un contenitore con la proprietà display: flex; gli elementi al suo interno diventano così dei box flessibili; se sono elementi block restano blocco, se sono elementi inline vengono inclusi in blocchi “virtuali”. In questo modo, qualsiasi elemento dentro ad un flexbox si comporta allo stesso modo.

Una perfetta demo di tutte le proprietà CSS del modulo si trova qui: http://demo.agektmr.com/flexbox/.

Un primo esempio di uso è quello che permette di suddividere uno spazio orizzontale tra elementi diversi, senza sapere a priori di quanti elementi si tratta. Ciascun elemento sarà associato ad un “peso”; un elemento con peso 2 avrà quindi larghezza doppia di un elemento con peso 1.

Per farlo, va indicato nel parent:

.flexparent {
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
width: 100%;
}

Da notare la width: 100%; se non la impostiamo, alcuni browser impostano la larghezza del parent alla somma delle larghezze dei figli, e il gioco non funziona.

I figli invece avranno indicazioni di questo tipo:

.flexchild1 {
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
}
.flexchild2 {
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
}

Il valore della proprietà indica il peso; i figli con classe .flexchild2 avranno larghezza doppia di quelli con classe .flexchild1.

Inserendo quindi un figlio di classe flexchild2 e due di classe flexchild1, la larghezza si suddividerà in quattro parti, due delle quali saranno occupate dal figlio flexchild2 e due dai due figli flexchild1.