Tutto sul box model flessibile

Ci sono aspetti dei CSS3 che fanno meno notizia solo per il fatto che non contemplano la realizzazione di scintillanti effetti visuali. Cià non toglie che le loro potenzialità  siano di estremo interesse.

Per quanto riguarda la strutturazione del layout, ad esempio, merita di essere preso in considerazione il cosiddetto box model flessibile. àˆ supportato al momento da Safari, Chrome e Firefox nelle loro versioni più recenti.

Un eccellente punto di partenza per scoprirne i segreti è questo articolo uscito su Mozilla Hacks. Dal momento che alcuni degli esempi allegati non sembrano funzionare (a differenza della demo finale), ho replicato quello iniziale per illustrare il concetto di base.

Nel box model tradizionale dei CSS, gli elementi vengono distribuiti sulla pagina in senso verticale, seguendo l'ordine con cui sono definiti nel markup HTML. Dato questo codice HTML

1
2
3

si ottiene questo risultato.

Utilizzando il box model flessibile possiamo però fare in modo che i tre div si dispongano in senso orizzontale. Ecco le dichiarazioni CSS usate:

body{
  display : -moz-box;
  display : -webkit-box;
  display : box;
  -moz-box-orient : horizontal;
  -webkit-box-orient : horizontal;
  box-orient : horizontal;
}

Il risultato è questo.

Le opzioni sono molte altre. Si può ad esempio stabilire un ordine preciso per i div, intervenire sulle dimensioni, etc. L'articolo illustra al meglio ciascuno di questi aspetti con snippet di codice e spiegazioni esaustive. Da aggiungere ai bookmark.