Premessa doverosa, la proprietà css che vediamo ora al momento verte ancora in uno stadio larvale. Il suo supporto è limitato ai browser più recenti WebKit e Firefox (utilizzando i tag proprietari). Tuttavia il problema, a differenza di tanti altri tag come il border-radius oppure il box-shadow ecc… che offrono risultati “funzionali” anche su browser che non li supportano, in questo caso abbiamo a che fare con una proprietà che fa letteralmente saltare in aria tutto laddove il supporto manca. Prendiamola quindi con le pinze ma tenendo conto dell’enorme potenzialità che offrirà in futuro. Iniziare infatti a capire il funzionamento di queste proprietà fin da oggi ci aiuterà a capire meglio il trend verso cui ci si sta muovendo e ci farà trovare pronti al momento giusto!
Un modello di layout flessibile
Attraverso le proprietà box-orient, box-flex e box-ordinal-group avremo modo di:
- ridistribuire i box in un ordine differente da quello mostrato nel markup
- creare un un layout flessibile dove i box si allargano o restringono a seconda dello spazio disponibile
Prendendo ed approfondendo uno spunto tratto da un eccellente articolo comparso su 24ways.org, vediamo un esempio che mixa queste possibilità.
Guardiamo il css utilizzato:
.box {
display: box;
display: -moz-box;
display: -webkit-box;
width:600px;
height:200px;
border: 1px solid #999;
}
.flessibile1 {
box-flex:1;
-moz-box-flex:1;
-webkit-box-flex:1;
box-ordinal-group:1;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
background:#FFC;
}
.flessibile2 {
box-flex:2;
-moz-box-flex:2;
-webkit-box-flex:2;
box-ordinal-group:2;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background:#FC3;
}
.flessibile3 {
box-flex:3;
-moz-box-flex: 3;
-webkit-box-flex:3;
box-ordinal-group:3;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background:#F60;
}La proprietà display:box
Osserviamo subito i punti salienti. Nel nostro esempio il contenitore di tutto è chiamato “.box”. Possiamo notare tra le proprietà css3 la presenza di display: box. Questa proprietà dice al browser che all’interno di questi box viene utilizzato un box model di tipo flessibile. A questo punto si potrebbe dichiarare anche l’orientamento (box-orient) di default settato in orizzontale. Ebbene sì, niente float!
box-flex
La proprietà box flex invece è apparentemente la più complicata da capire. Nel nostro esempio il contenitore flessibile2 è due volte la dimensione di flessibile1, mentre flessibile3 è tre volte la dimensione di flessibile1. Concettualmente si ragiona come in percentuale ma con un vantaggio enorme; in caso di aggiunta di un quarto box infatti, tutte gli altri si “riadattano” per contenerlo!
box-ordinal-group
E udite udite, per concludere con una ciliegina sulla torta non poteva mancare la possibilità di riordinare i nostri box cambiando un semplice numero. Basterà infatti modificare il valore del box-ordina-group ed i nostri blocchi si sposteranno immediatamente.
Per il momento è tutto. Un’accortezza però: è bene non mischiare larghezze fisse ed elementi flessibili. Ci sono alcune accortezze da considerare in tal caso e la faccenda si complica ulteriormente… Per un approfondimento completo vi lascio a questa guida rilasciata da Mozilla per tutti gli sviluppatori. Roba che scotta 😉
Ad ogni modo il mio consiglio è di iniziare a masticare queste novità così da trovarci pronte quanto diverranno pane per tutti noi!
