• Programmazione » CSS » Tutorial CSS

Vediamo come utilizzare lo strumento Flexbox per gestire al meglio box e moduli delle nostre pagine web.

Flex Box (conosciuto anche come Flexbox o Flexible Box Model) è uno strumento CSS3 progettato per l’interface design. Tramite CSS3 Flexbox è possibile gestire in modo ottimale i vari box e moduli che compongono la struttura delle nostre pagine. Insomma: layout più facili da ordinare e posizionare, senza alcun bisogno di “floats ”.

Lo strumento Flexbox funge da integratore alla proprietà display dei CSS attraverso 8 sottoproprietà complementari:

• box-orient
• box-pack
• box-align
• box-flex
• box-flex-group
• box-ordinal-group
• box-direction
• box-lines

La disposizione modulare può avvenire sia in orizzontale che in verticale e c’è massima flessibilità (da qui il nome Flex) per l’assegnazione e il posizionamento degli elementi “figlio”.

Flex Box: stili usati

display: box

La proprietà  display: box indica che il “box” e il “child-box” (figlio) verranno implementati nel Flex Box. Il modello Flex Box funziona solo con il box figlio più prossimo.

box-orient

Valori: horizontal | vertical | inherit

Queste proprietà illustrano I valori d’allineamento. Ci sono anche 2 proprietà supplementari, inline-axis e block-axis, che mappano la struttura rispettivamente in orizzontale e in verticale.

box-pack

Valori: start | end | center | justify

Il box-pack definisce come allineare il box lungo l’asse del box-orient.

box-align

Valori: start | end | center | baseline | stretch

Box-align stabilisce come il box figlio debba essere allineato al Box.

Flex Box: stili usati nel box figlio

box-flex

Box-flex indica i valori di flessibilità del child-box (box figlio). Il valore di default è 0, che significa inflessibilità.

Ma proviamo a fare qualche esempio, per capire come usarli al meglio. Nelle prossime stringhe di codice diremo ad HTML e CSS3 di implementare i “child box” lungo l’asse orizzontale senza ricorrere ai float.

CSS

#flexbox {   display: box;  box-orient: horizontal;}

Markup HTML

<div id="flexbox">  <p>child 1</p>  <p>child 2</p>  <p>child 3</p></div>

In questo esempio abbiamo allineato i box da sinistra verso destra dal numero 1 al numero 3.

Cerchiamo ora di vedere un esempio di codifica un po’ più elaborato. Come sopra, ma con l’inoculazione supplementare della proprietà box-flex:

#flexbox {   display: box;  box-orient: horizontal;}#flexbox > p:nth-child(3) {  box-flex: 1;}

I primi 2 child-box rimangono rigidi (standard di default), mentre l’ultimo, il numero 3, è diventato flessibile.

Nel prossimo esempio di stile avremo invece 3 elementi: 1 rimarrà rigido, gli altri 2 diventeranno flessibili in orizzontale (grazie alla proprietà box-orient assegnata).

#flexbox {   display: box;  box-orient: horizontal;}#flexbox > p:nth-child(2),#flexbox > p:nth-child(3) {  box-flex: 1;}