Paolo De Feo
a- a+

Ordinare box in modo flessibile in orizzontale e verticale con i CSS3

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;
}



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Francesco
Hai dubbi su questo articolo?