pannello di controllo




Sei qui: Homepage » css » CSS3: Flexible Box Layout Module

15 ottobre 2009 - Autore:

CSS3: Flexible Box Layout Module

Analisi della nuova specifica CSS3 per gestire i layout e l’allineamento verticale.

Tra i vari moduli in lavorazione nelle specifiche dei CSS3, ce n’è uno particolarmente interessante: il Flexible Box Layout Module. Con questa specifica (ancora in sviluppo) è possibile infatti rendere flessibili i contenuti di un box, facendo loro occupare lo spazio vuoto a disposizione, sia orizzontalmente che verticalmente.

Il codice CSS

La teoria è semplice: dato un contenitore e degli elementi al suo interno, questi potranno adattarsi allo spazio vuoto. Considerando come html di base:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

Il CSS necessario per far adattare verticalmente i due div interni sarà:

.container {
    display: box;
    box-align: stretch;
    box-orient: vertical;
}
.box {
    box-flex: 1;
}

N.B.: Per lo stretch orizzontale, basta usare box-orient: horizontal.

In realtà per effettuare dei test è ancora necessario utilizzare i prefissi -moz- e -webkit-, visto che le proprietà standard non sono ancora supportate.

Esempi pratici

Flexible box layout model

Per capire ancora meglio la dinamica di questo modulo, gli esempi che trovate su css3.info sono meglio di qualsiasi descrizione testuale, a patto che stiate utilizzando le ultime versioni di Firefox, Safari o Chrome. Il W3C infatti sta ancora lavorando sul documento, e per adesso solo i motori di rendering Gecko e Webkit hanno delle istruzioni proprietarie adatte allo scopo.

Da notare che i due motori presentano risultati differenti, pur rendendo chiaramente l’idea dell’utilità della proprietà. A mio parere l’interpretazione corretta è quella di Webkit, ma finchè le specifiche non saranno definitive diventa difficile stabilirlo.

Un altro articolo interessante a riguardo è sul blog di Alex Russel, che ha preparato un foglio di stile su misura per avere già pronte tutte le classi necessarie.

Perchè parlarne?

Se le specifiche per il Flexible Box Layout Module sono ancora così indietro, ha senso parlarne? La risposta è sì, come nel caso di tutte le altre proprietà dei CSS3 che non sono ancora supportate. Pur non potendo utilizzarle nei propri progetti, per un web designer non è mai troppo presto per sperimentare: quando arriverà il momento sarà un grande vantaggio conoscerle.

Purtroppo l’ostacolo è rappresentato dalla lentezza del W3C e dal normale ciclo di vita dei browser: finchè esisteranno sul mercato delle versioni che non supportano queste nuove proprietà, sarà ancora presto per utilizzarle.

5 Commenti a “ CSS3: Flexible Box Layout Module ”

  1. molto interesante come cosa, spriamo che il W3C si dia una mossa per implementare tutte le nuove funzionalità del CSS3 e che sopratutto M$ lo integri nel suo browser.

    ciao

  2. Concordo in pieno, sempre meglio dare un’occhiata che ritrovarsi all’improvviso con tutto da re-imparare.

  3. Fantastico! Non la sapevo questa!
    Grande Tom!

    Ottimo anche per il futuro del mio sito..

  4. finalmente hanno capito che lo spazio verticale non va sottovalutato ;-) brutto da dirsi ma 6-7 anni fa, quando c’erano le tabelle, almeno potevo scegliere di allineare gli elementi anche in verticale!

  5. @Laura: in orizzontale sono bruttissime da vedere!

Scrivi un commento


Menu secondario

feed

categorie

archivio

twitter e blog personale

Twitter

TomStardust Diary - Il mio blog personale