Avvertenza: Il modulo CSS flessibile layout originale è stato sostituito da uno standard più recente attualmente risulta ancora supportato attraverso i prefissi -moz- e -webkit-. Vedere flexbox per informazioni sullo standard attuale.
Risorse dal web:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://www.html.it/pag/19465/flexible-box-layout/
Un'altro modulo utile della specifica CSS3 è senza dubbio il Flexible layout module (detto anche flexbox).
Questo modulo ci consente di realizzare complessi layout di pagine web.
Il procedimento è sempre il medesimo, per la gestione di un layout flexible, applicheremo delle proprietà al container (box contenitore) e delle proprietà agli elementi contenuti.
<div class="container"> <p id="uno">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p id="due">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p id="tre">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div>
Qui di seguito elenchiamo tutte le principali proprietà per i box contenitori:
| display | con valore "box", attiva il layout flessibile |
| box-orient | imposta la disposizione dei box su verticalmente o orizzontalmente |
| box-direction | imposta la direzione dei box: di default normalmente (da sinistra verso destro) o in direzione inversa |
| box-align | imposta l'allineamneto dei box, in verticale se disposti orizzontalmente o in orizzontale se disposti verticalmente |
| box-pack | gestisce l'eventuale spazio vuoto non occupato dai box |
Per attivare il modello di layout flessibile dovremo usare sull'elemento contenitore una nuova proprietà display con il valore box.
.container{
display: box;
display: -moz-box;
display: -webkit-box;
}
Note: per una compatibilità cross-browser potrebbe essere necessario far precedere al valore "box" i suffissi -moz- e -webkit-
Con la proprietà box-orient possiamo impostare la disposizione/orientamento dei box. Attraverso questa proprietà decidiamo se i box saranno disposti in senso verticale oppure orizzontale.
Valori possibili
vertical | comportamento di default per gli elementi block |
horizontal | I box si dispongono sull’asse orizzontale, uno accanto all’altro. |
.container {
display: box;
box-orient: horizontal;
}
Con la proprietà box-direction possiamo impostare la direzione da far rispettare ai box.
Valori possibili
| normal | da sinistra verso destra, dal primo all'ultimo; comportamento predefinito |
| reverse | inverso, dispone gli elementi al contrario, dall'ultimo al primo |
| inherit | ereditata la direzione impostata per l’elemento parente |
.container {
display: box;
box-orient: horizontal;
box-direction: reverse;
}
La proprietà box-align imposta l'allineamento dei box; regola l'allineamento in verticale se i box sono disposti orizzontalmente oppure regola l'allineamento in orizzontale se i box sono allineati verticalmente.
Valori possibili:
stretch | disteso/espanso, valore di default |
| start | allineamento alla parte iniziale |
| end | allineamento alla parte finale |
| center | allineamento al centro/centra |
| baseline | allinea le linee di base dei contenuti; solo con box-orient: horizontal |
.container{
display: box;
box-orient: horizontal;
box-direction: reverse;
box-align: center;
}
La proprietà box-pack è utilie a gestire lo spazio vuoto non occupato dai box.
Valori possibili:
| justify | lo spazio vuoto viene distribuito equamente tra i box |
| start | valore di default: l’eventuale spazio vuoto viene lasciato a destra |
| end | lo spazio vuoto viene collocato a sinistra |
| center | i box vengono centrati e lo spazio vuoto equamente distribuito agli estremi |
.container{
dispaly: box;
box-orient: horizontal;
box-direction: reverse;
box-align: center;
box-pack: justify;
}
Queste le principali proprietà per la formattazione degli elementi contenuti nei container:
| box-ordinal-group | stabilisce l’ordine in cui i box saranno visualizzati (ordine numerico) |
| box-flex | imposta il fattore di crescita |
Con la proprietà box-ordinal-group possiamo stabilire l’ordine in cui i box saranno visualizzati dichiarandolo esplicitamente la posizione indicandone numericamente la posizione.
#uno{
box-ordinal-group: 3;
}
#due{
box-ordinal-group: 1;
}
#tre{
box-ordinal-group: 2;
}
Con la proprietà box-flex stabiliamo il dimensionamento dei box e la distribuzione tra di essi dello spazio disponibile.
#uno{
box-flex: 2;
}
#due{
box-flex: 1;
}
#tre{
box-flex: 2;
}
Partendo con valore di default di 1 per tutti gli elementi l'elemento con valore più alto occuperà meno spazio.