CSS Flexbox per esempi

Prima di proseguire con la guida è utile scorrere, in una ricca carrellata iniziale, alcuni esempi che ci aiutino a comprendere in pratica il significato delle regole che abbiamo introdotto. Questa parte sarà utile perché riprenderemo molti di questi esempi per realizzare layout o componenti nel corso della guida.

Creeremo un box contenitore centrato orizzontalmente e verticalmente rispetto al body, con all'interno tre box centrati a loro volta orizzontalmente e verticalmente, disposti in modo da essere equamente distanziati nello spazio disponibile.

Si parte inserendo nel corpo del documento un div con id container:

<div id="container">
 ...
</div>

Assegniamo via CSS a questo div una serie di stili per lo sfondo, il bordo e le dimensioni:

#container {
 background: #e3e3e3;
 border: 2px solid black;
 width:740px;
 height: 300px;
}

Per centrarlo verticalmente e orizzontalmente sulla pagina, dobbiamo tenere presente che il suo elemento contenitore è l'elemento body. Per prima cosa dobbiamo pertanto fissare l'altezza per i selettori html e body al 100%, in modo da creare una dimensione di riferimento per la centratura verticale:

html, body {height: 100%;}

A questo punto, ci affidiamo al flexbox. Basterà impostare per il body (il nostro contenitore 'flessibile') la proprietà display sul valore flex, e quindi agire sulle proprietà justify-content e align-items: per entrambe useremo il valore center. Nel codice si risolve tutto in tre regole, la sintassi è qui più verbosa perché per Safari è ancora necessario ricorrere al prefisso -webkit-:

body {
 margin:0;
 padding:0;
 display: flex;
 display: -webkit-flex;
 justify-content: center;
 align-items: center;
 -webkit-justify-content: center;
 -webkit-align-items: center;
}

Ecco cosa abbiamo ottenuto in questo primo step.

È ora il momento di aggiungere i tre box all'interno del div con id container:

<div id="container">
 <div id="box-1">Box 1</div>
 <div id="box-2">Box 2</div>
 <div id="box-3">Box 3</div>
</div>

Mettiamo mano al CSS per assegnare uno sfondo e un bordo ai tre box:

#box-1 {
 background: red;
 border: 1px solid black;
}
#box-2 {
 background: blue;
 border: 1px solid black;
}
#box-3 {
 background: green;
 border: 1px solid black;
}

A questo punto, volendo usare il flexbox per disporre i tre box, è necessario che diventino 'flessibili'. Per il loro elemento parente, il div con id container, dobbiamo pertanto dichiarare display: flex:

#container {
 background: #e3e3e3;
 border: 2px solid black;
 width:740px;
 height: 300px;
 display: flex;
 display: -webkit-flex;
}

Non basta. Dobbiamo anche dichiarare in che direzione disporre i box, ovvero stabilire l'asse principale. Vogliamo che siano disposti su una riga e non in colonna, e così settiamo su row il valore per la proprietà flex-direction. Inoltre, vogliamo che il contenitore sia a riga singola: usiamo la proprietà flex-wrap con il valore nowrap. Per semplificare, facciamo ricorso alla proprietà flex-flow per dichiarare entrambe le proprietà con una sola regola:

#container {
 background: #e3e3e3;
 border: 2px solid black;
 width:740px;
 height: 300px;
 display: flex;
 display: -webkit-flex;
 flex-flow: row nowrap;
 -webkit-flex-flow: row nowrap;
}

Ecco cosa abbiamo ottenuto fino a questo punto.

Per centrare verticalmente i tre box all'interno del contenitore, ricorriamo ancora una volta alla proprietà align-items:

#container {
 background: #e3e3e3;
 border: 2px solid black;
 width:740px;
 height: 300px;
 display: flex;
 display: -webkit-flex;
 flex-flow: row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: center;
 -webkit-align-items: center;
}

Questo è il risultato.

Il nostro obiettivo però è di avere i tre box distanziati equamente tra di loro e centrati anche orizzontalmente. Usiamo allora la proprietà justify-content con il valore space-around. A differenza del valore space-between, che colloca il primo e l'ultimo box alle estremità del contenitore, space-around aggiunge un margine verso il bordo del contenitore stesso. Ecco il codice:

#container {
 background: #e3e3e3;
 border: 2px solid black;
 width:740px;
 height: 300px;
 display: flex;
 display: -webkit-flex;
 flex-flow: row nowrap;
 -webkit-flex-flow: row nowrap;
  align-items: center;
 -webkit-align-items: center;
 justify-content: space-around;
 -webkit-justify-content: space-around;
}

Ed ecco l'esito.

A questo punto bisogna gestire il dimensionamento dei box in larghezza e altezza. Si tratta di scelte progettuali che dipendono dal contenuto e dalla configurazione di layout che si vuole ottenere. Si tenga comunque presente che in assenza di un dimensionamento esplicito i box adeguano le loro dimensioni a quelle del contenuto (esempio 5).

Nel nostro esempio ciò che vogliamo ottenere, lo ricordiamo, sono dei box ad altezza e larghezza fissa equamente distanziati. Pertanto, senza ricorrere a particolari proprietà del flexbox, scriviamo nel codice:

#box-1, #box-2, #box-3 {
 padding: 20px;
 width: 180px;
 height: 100px;
}

Questo il risultato.

La flessibilità, in questo scenario, è data dal fatto che i margini sono calcolati automaticamente in base allo spazio disponibile che viene equamente distribuito.

Un'ultima variante prima di concludere. Sfruttiamo la proprietà order applicata ai box per modificare l'ordine in cui compaiono, superando così l'ordine di dichiarazione nel codice sorgente. Si tratta, come si può intuire, di una funzionalità utilissima i svariati scenari, a partire dal design responsivo. Basta impostare il valore della proprietà con un numero corrispondente alla posizione:

#box-1 {
 background: red;
 border: 1px solid black;
 order: 2;
 -webkit-order: 2;
}
#box-2 {
 background: blue;
 border: 1px solid black;
 order: 3;
 -webkit-order: 3;
}
#box-3 {
 background: green;
 border: 1px solid black;
 order: 1;
 -webkit-order: 1;
}

Ecco il risultato finale.