Uno dei moduli più interessanti e innovativi di CSS3 è, sicuramente, quello che introduce i Flexible Box o Flexbox. Si tratta di una novità importante in quanto riguarda la creazione di layout, cioè uno degli ambiti più complessi del lavoro del Web designer. In realtà non sarebbe sbagliato affermare che i Flexbox rappresentano il primo strumento sintattico appositamente pensato per la gestione dei layout.
Secondo opinioni illustri, infatti, la tecnica basata su Flexbox diventerà lo standard di riferimento per la creazione di layout per il web prendendo il posto (o affiancando) la tecniche alle quali tutti siamo abituati. In pratica, grazie ai Flexbox dovrebbe essere più semplice creare layout responsivi senza la necessità di ricorrere ad elementi flottanti, posizionamenti assoluti o ad altri accorgimenti "cervellotici" (si pensi, ad esempio, alle svariate tecniche che sono state escogitate per effettuare la centratura verticale di un box di dimensioni fluide).
Flexbox: in sintesi
Ma in cosa consiste questa tecnica? Come suggerisce il nome, la tecnica dei Flexbox, si basa sull’idea di layout flessibile secondo la quale i box, presenti all’interno di un elemento contenitore, possono essere disposti utilizzando vari metodi in grado di influire sul loro ordinamento, allineamento e collocazione nello spazio.
Per meglio comprendere il funzionamento dei Flexbox può essere utile far riferimento a questa immagine:
Nell’immagine possiamo vedere tre elemeni: un contenitore (flex container) e due elementi figli (flex item). Il contenitore è l’elemento centrale dal quale bisogna partire.
Definire il contenitore di un layout flessibile
Abbiamo detto che questa tecnica riguarda la disposizione dei box all’interno di un contenitore, la prima cosa da fare, pertanto, è definire questo elemento (che potrebbe anche essere il <body> della pagina).
Per creare il nostro contenitore dovremo assegnargli la proprietà display con valore flex in questo modo:
body {
display: flex;
}
In pratica, "flex" è un nuovo possibile valore della proprietà display e sta ad indicare, appunto, che quello che sarà contenuto all’interno di questo elemento sarà gestito in modo flessibile.
Le proprietà del contenitore
A questo punto possiamo agire impostando diverse proprietà che andranno a definire il modo in cui verranno a posizionarsi gli elementi figli del nostro contenitore.
Le proprietà che possono essere applicate al contenitore sono:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
Vediamo ora, in pratica, i possibili valori ed i relativi effetti stilistici delle proprietà citate.
Per gli esempi che seguiranno faremo riferimento alla seguente struttura HTML:
<div class="flessibile">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Allineamento in riga o in colonna con flex-direction
Grazie alla proprietà flex-direction è possibile definire se gli elementi figli debbano essere disposti in riga (uno accanto all’altro) piuttosto che in colonna (uno sopra all’altro).
Visualizzazion in linea
Per esporre gli elementi in riga utilizzeremo questo codice CSS:
.flessibile {
display: flex;
flex-direction: row;
}Così facendo i nostri box saranno visualizzati uno accanto all’altro seguendo l’ordine naturale (da sinistra verso destra). Se avessimo voluto mostrarli in ordine inverso (cioè da destra verso sinistra) avremmo dovuto usare il valore row-reverse in questo modo:
.flessibile {
display: flex;
flex-direction: row-reverse;
}
Visualizzazione in colonna
Per disporre gli elementi in colonna utilizzeremo questo codice CSS:
.flessibile {
display: flex;
flex-direction: column;
}
Così facendo i nostri box saranno visualizzati uno sotto all’altro seguendo l’ordine naturale (dall’alto verso il basso). Se avessimo voluto mostrarli in ordine inverso (cioè dal basso verso l’alto) avremmo dovuto usare il valore column-reverse in questo modo:
.flessibile {
display: flex;
flex-direction: column-reverse;
}Disporre gli elementi su una o più righe con flex-wrap
La proprietà flex-wrap indica al browser se disporre i box all’interno del contenitore su una riga o su più righe in base allo spazio disponbile.
Impostando il valore della proprietà su wrap i box potranno disporsi su più righe:
.flessibile {
display: flex;
flex-wrap: wrap;
}
Impostando il valore nowrap, invece, si ridimensioneranno per restare su un’unica riga:
.flessibile {
display: flex;
flex-wrap: nowrap;
}
oltre a questi valori esiste anche wrap-reverse che crea un effetto un po’ singolare con le diverse linee in ordine inverso (con gli elementi di ciascuna linea, cioè, disposti da destra verso sinistra).
La propeità flex-flow
Con la proprietà flex-flow è possibile gestire, simultaneamente, i valori delle proprietà flex-direction e flex-wrap, in questo modo:
.flessibile {
display: flex;
flex-wrap: row wrap;
}Allineare gli elementi orizzontalmente con flex-justify
E’ possibile definire l’allineamento orizzontale degli elementi figli di un contenitore flessibile. Per farlo utilizzeremo la proprietà justify-content in questo modo:
.flessibile {
display: flex;
justify-content: center;
}
Il codice visto sopra produce un allineamento al centro. Di seguito l’elenco valori supportati:
- center – allineamento centrato orizzontalmente;
- flex-start – allineamento a sinistra;
- flex-end – allineamento a destra;
- flex-around – allineamento giustificato con spazi prima, dopo e tra gli elementi;
- flex-between – allineamento giustificato con spazi tra gli elementi.
Allineare gli elementi verticalmente con align-items
E’ possibile gestire l’allineamento verticale degli elementi figli di un contenitore flessibile attraverso la proprietà align-items in questo modo:
.flessibile {
display: flex;
align-items: center;
}
Il codice visto sopra produce un allineamento al centro dello spazio verticale. Di seguito l’elenco valori supportati:
- center – allineamento centrato verticalmente;
- flex-start – allineamento superiore;
- flex-end – allineamento inferiore;
- stretch – gli elementi figli si adattano all’altezza del contenitore;
- baseline – gli elementi figli si allineano alla baseline del contenitore.
Allineare le linee con align-content
Poco sopra abbiamo visto come gestire l’allineamento dei vari box. Ora vedremo come gestire l’allineamento delle eventuali linee nelle quali vengono a distribuirsi i vari box.
Per raggiungere questo obiettivo utilizzeremo la proprietà align-content con uno dei seguenti valori:
- center – le linee si allineano al centro dell’altezza del contenitore;
- flex-start – le linee si allineano al margine superiore del contenitore;
- flex-end – le linee si allineano al margine inferiore del contenitore;
- stretch – le linee si adattano all’altezza del contenitore per riempirla integralmente;
- space-between – le linee si dispongono omogenamente nel contenitore mediante spazi prima, dopo e tra di esse;
- space-around – le linee si dispongono omogenamente nel contenitore mediante spazi tra di esse;
Le proprietà per i box flessibili (flex item)
I figli diretti di un elemento con display: flex diventano, automaticamente, "flessibili".
Vediamo ora quelle che sono le proprietà che i Flexbox prevedono per gli elementi figli (per i singoli box, cioè, che compongono il nostro layout).
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
Ordinare gli elementi con order
Attraverso la proprietà order è possibile definire l’ordinamento degli elementi. Vediamo un esempio:
<div class="flessibile">
<div style="order: 3">1</div>
<div style="order: 1">2</div>
<div style="order: 2">3</div>
</div>
Come potete notare abbiamo settato un ordine assolutamente arbitrario degli elementi e quest’ordine non dipende minimamente dall’ordine strutturale (l’ordine, cioè, in cui gli elementi sono inseriti nella struttura HTML del documento).
Dimensionare gli elementi con flex-grow
Una proprietà molto interessante è quella che consente di specificare la larghezza degli elementi gli uni rispetto agli altri. Questa proprietà è flex-grow. Vediamo un esempio:
<div class="flessibile">
<div style="flex-grow: 2">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 5">3</div>
</div>
Contrarre gli elementi con flex-shrink
Con la proprietà flex-shrink è possibile definire quanto un elemento debba contrarsi rispetto agli altri. In pratica, questa proprietà gestisce l’esigenza contraria di flex-grow.
Vediamo un esempio:
.flessibile {
display: flex;
flex-wrap: nowrap;
}<div class="flessibile">
<div>1</div>
<div style="flex-shrink: 0">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Nel nostro esempio, l’elemento cui abbiamo applicato la proprietà flex-shrink con valore zero manterrà immutate le sue dimensioni, mentre gli altri si contrarranno.
Definire la larghezza iniziale di un elemento con flex-basis
Essendo i Flexbox uno strumento per la creazione di layout "flessibili", non è dato sapere quale sarà la larghezza effettiva dei singoli elementi. CSS3, tuttavia, offre la possibilità di definire quella che sarà la larghezza iniziale. Vediamo un esempio:
<div class="flessibile">
<div>1</div>
<div style="flex-basis: 300px">2</div>
<div>3</div>
</div>
Impostare tutte le proprietà dimensionali in un colpo solo con flex
Attraverso la proprietà flex è possibile impostare, in un colpo solo, tutte le caratteristiche dei box flessibili. Vediamo un esempio:
<div class="flessibile">
<div>1</div>
<div style="flex: 2 0 300px">2</div>
<div>3</div>
</div>Nel nostro esempio abbiamo riprodotto l’effetto che avremmo ottenuto applicando queste tre proprietà:
flex-grow: 2; flex-shrink: 0; flex-basis: 300px;
Allineare uno specifico elemento in modo indipendente con align-self
La proprietà align-self consente di allineare un elemento in modo indipendente rispetto ai criteri di ordinamento stabiliti per il contenitore. Vediamo un esempio:
<div class="flessibile">
<div>1</div>
<div style="align-self: center">2</div>
<div>3</div>
</div>
