Quante volte vi siete picchiati con i CSS per ordinare i box orizzontalmente o verticalmente come vi aggradava? Da oggi non sarà più un problema – mi sembra di scrivere quegli spot promozionali che vanno nelle tv locali ndBuothz -, con CSS3 e il progetto Flexbox possiamo dire addio ai float e avere dei layout flessibili gestiti interamente dal browser.

Il box model Flexbox è pensato per la progettazione dell'interfaccia, è stato aggiunto un sistema aggiuntivo che va ad integrare con i CSS, i figli di un box sono disposti orizzontalmente o verticalmente e lo spazio non utilizzato può essere finalmente assegnato ad un particolare figlio o distribuito tra gli altri figli, mediante l'attribuzione di "flex", al box figlio che si vuole scegliere. Non sto parlando di un albero genealogico, se vi sembrano strani termini come padri e figli vi rimando alla lettura della struttura ad albero. Questo nuovo modello è basato sul box model nel linguaggio XUL utilizzato da molte applicazioni sviluppate da Mozilla Corporation, per citarne uno il browser Firefox.

Flexbox assegna un nuovo valore denominato box alla proprietà display e otto nuove proprietà:

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

Bisogna fare una distinzione tra box padre e box figlio, vediamo le proprietà di stile, a cui lasceremo il nome originario style proprieties, che intervengono in Flexbox. 

Style usati nel box:

  • display: box
    Il box ed il suo figlio successivo saranno inseriti nel flexbox. E' importante ricordare che funziona solamente con il figlio successivo.
  • box-orient, Values: horizontal | vertical | inherit
    Come si allineano i box figli? Intervengono due valori inline-axis (settato di default) e block-axis, che si riferiscono rispettivamente a coordinate orizzonatli e verticali.
  • box-pack, Values: start | end | center | justify
    Fissa l'allineamento del box lungo l'asse del box-orient. In modo che se il box-orient è orizzontale sarà scelto come il box figlio saranno allineati orizzontalmente, e viceversa.
  • box-align, Values: start | end | center | baseline | stretch
    Fissa come il box figlio è allineato al box. Se l'orientamento è orizzontale imposterà l'allineamento verticale e viceversa.

Style usati nel box figlio:

  • box-flex, Values: 0 | un numero diverso da zero
    Il valore di flessibilità per il figlio. Se un figlio ha il valore intero (integer) 1, e il suo fratello ha 2, ogni spazio supplementare nel box padre sarà considerato il doppio (2) del padre. Il valore di default è 0 che rappresenza la non flessibilità.

Tralasciamo volutamente box-flex-group, box-ordinal-group, box-direction, box-lines perché non necessari per questo tutorial, vi rimandiamo ad hacks.mozilla.org.

Un'ultima precisazione prima di iniziare il tutorial riguarda la compatibilità nei vari browser, vi rimandiamo alla lettura del flexbox-browser-support, gli "hack" per i vari browser sono volutamente tralasciati per non creare confusione in sede di spiegazione ma vanno assolutamente utilizzati altrimenti il lavoro fatto sarà incompatibile, potete inotre vedere la compatibilità di Flexbox sui vari browser su When can I use.

Flessibilità

La proprietà di stile box-flex definisce se un figlio deve essere flessibile o rigido, e aiuta a definire il valore di flessibilità (quanto sarà flessibile) rispetto ai fratelli.
Facciamo in div che sarà il box padre e tre paragraph che saranno i figli

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

Una volta definito il codice HTML definiamo un layout dove i figli saranno distribuiti orizzontalmente l'uno accanto all'altro e la loro altezza dovrà corrispondere indipendentemente dal loro contenuto, lo facciamo dichiarando l'id flexbox in un foglio di stile (CSS)

#flexbox {<br />        display: box;<br />        box-orient: horizontal;<br />    }

In queste poche righe di codice diciamo di definire i figli lungo l'asse orizzontale senza l'uso dei float, la somma della larghezza dei figli non andrà mai oltre quella del padre, come potete vedere con l'immagine seguente:

Di default i figli del flexbox sono rigidi, per renderli flessibili si usa la proprietà box-flex, in pratica il foglio di stile verrà aggiornato con:

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

In questo caso abbiamo detto al browser di far diventare l'ultimo figlio, il terzo nel nostro esempio, flessibile, un'immagini aiuterà a chiarirvi le idee:

L'elemento diventa flessibile in orizzontale perché abbiamo definito box-orient: horizontal e siccome il valore box-flex è relativo se vogliamo agire sul figlio numero 2 dobbiamo fare:

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

Come potete vedere abbiamo ottenuto un box padre al cui interno sono contenuti tre figli, il primo è rigido, il secondo ed il terzo sono flessibili, con poche istruzioni e quindi con il codice stretto all'osso, adesso applichiamo la teoria alla pratica, potete consultare il codice dei due files HTML per vedere il codice in azione.

Nel file flexbox-esempio.html potete vedere il Flexbox alle prese con tre figli fluidi.
Nel file flexbox-resizemanuale.html Flexbox viene utlizzato per fare il resize manuale di un box.