Skip to main content

Introduzione a HTML 5: flexible box model

In questa serie di articoli su HTML 5 abbiamo affrontato le novità più importanti nella scrittura di HTML e siamo poi passati alle novità in CSS 3.

Nello scorso articolo abbiamo ripassato il traditional box model, ovvero la logica con cui viene attualmente gestita la disposizione degli elementi nella pagina: ora vediamo una possibile innovazione che risponde al nome di flexible box model.

Un possibile cambiamento della gestione del box model

La gestione attuale, pur avendo fatto enormi passi avanti rispetto al layout basato sulle tabelle, conserva ancora qualche limite che si traduce poi in una certa complessità di gestione.

Alla ricerca di soluzioni più efficienti, sono state fatte diverse proposte ma quella che sta riscuotendo più successo è appunto quella definita flexible box model.

Valutiamolo tuttavia per quello che è, ovvero una proposta che al momento è supportata solo in via molto sperimentale.

Elementi contenitori

Alla base di questo modello c’è il concetto che qualunque blocco o serie di blocchi deve essere contenuto in un elemento padre che ne definisce alcune regole.

Prendiamo ad esempio l’allineamento orizzontale. Attualmente per posizionare un qualunque blocco al centro della pagina, bisogna usare un codice simile:

<body>
  <div style="width: 980px;margin: auto">
  ...
   </div>
</body>

mentre con il nuovo modello è l’elemento padre che allinea gli elementi figli

<body style="display: box;box-pack: center">
   <div style="width: 980px">
   ...
   </div>
</body>

Due note importanti:

  • nell’esempio abbiamo usato la modalità inline per gli stili solo per mostrare rapidamente tutti gli elementi coinvolti, ma rimane valido che sia meglio inserire tali regole in un CSS separato
  • le proprietà box e box-pack al momento non sono supportate da nessun browser. Se volete provarle dovete usare il prefisso “-moz-” o “-webkit-“

Le proprietà aggiuntive del flexible box model

Sempre tenendo presente che si tratta di proprietà ancora non direttamente supportate, vediamo quindi di riepilogare le novità che potremmo trovarci a utilizzare:

  • display può essere impostato a box (trasformando l’elemento corrente in padre) o a inline-box
  • box-pack può essere impostato a start, end, center, justify distribuendo i blocchi figlio come se fossero parole lungo una riga di testo.
  • box-orient indica l’orientamento orizzontale (default) o verticale dei figli di un elemento
  • box-flex, disattivata per default, indica se il blocco si può adattare automaticamente o meno in base allo spazio disponibile (può comunque essere controllato con min-width e max-width). In particolare, è possibile definire un valore proporzionale di occupazione dello spazio per ciascun figlio.
  • box-align, impostata per default a stretch, allunga ogni blocco fino a occupare tutto lo spazio disponibile. Niente più faux columns, dunque.
  • box-direction (sul padre) ci permette di invertire la disposizione dei blocchi figlio
  • box-ordinal-group (su ciascun figlio) ci consente addirittura di specificarne la posizione

Come si può notare, una delle idee base di questo modello è espandere automaticamente ogni blocco fino a riempire tutto lo spazio disponibile, o comunque semplifcare decisamente l’occupazione dello spazio.

Altre novità in CSS 3

Se dovesse affermarsi questa nuova gestione del box model, sarebbe molto più divertente preparare il layout della pagina!

Ma per il momento passiamo oltre: questo modello è ancora sperimentale e, nel frattempo, CSS 3 ci porta già molte interessanti novità e semplificazioni che affronteremo nel prossimo articolo.

 

 

</div>