La guida definitiva a Flexbox

Panoramica

Il Flexbox Layout, ufficialmente noto come CSS Flexible Box Layout Module, è un modello di layout dei CSS.

Flexbox è un layout monodimensionale, il che significa che dispone gli elementi in una dimensione alla volta, sotto forma di riga o di colonna, ma non entrambe contemporaneamente. Si contrappone al modello bidimensionale, il CSS Grid Layout, che dispone gli elementi in due dimensioni simultaneamente (righe e colonne insieme).

Flexbox è stato introdotto come alternativa ai Float CSS per definire l'aspetto complessivo di una pagina web. Flexbox offre molti vantaggi: in particolare, ti permette di controllare l'allineamento, la direzione, l'ordine e la dimensione degli elementi.

Gli elementi all'interno di un contenitore flex:

possono essere organizzati in qualsiasi direzione (verso sinistra, verso destra, verso il basso o anche verso l'alto) (flex-direction).
possono avere un ordine diretto (da sinistra a destra) o invertito (da destra a sinistra).
possono avere larghezza e altezza "flessibili" per riempire lo spazio disponibile (flex-item).
possono essere impostati per comprimersi o espandersi dinamicamente lungo l'asse principale, mantenendo nel frattempo la dimensione dell'asse trasversale secondario.
possono essere organizzati linearmente lungo l'asse principale o disposti su più righe lungo o attraverso l'asse trasversale.

Flexbox è relativamente recente, ma oggi gode di un ottimo supporto da parte dei browser.

(Scopri di più sul supporto e sulla compatibilità dei browser).

Le basi di Flexbox

Quando lavori con Flexbox devi ragionare in termini di due assi — l'asse principale e l'asse trasversale — e devi distinguere tra contenitori flex ed elementi flex.

Asse principale e asse trasversale

Flexbox è un layout orientato a un singolo asse: ha un asse principale e un asse trasversale. Ciò significa che gli elementi vengono disposti lungo l'asse principale o lungo l'asse trasversale. L'asse trasversale è sempre perpendicolare a quello principale.

L'asse principale è definito dalla proprietà flex-direction, che ha i seguenti valori:

row
row-reverse
column
column-reverse

Se la proprietà flex-direction è impostata sui valori row o row-reverse, l'asse principale sarà orizzontale, ovvero scorrerà lungo la riga nella direzione inline. L'asse trasversale, invece, scorrerà lungo le colonne.

Se la proprietà flex-direction è impostata sui valori column o column-reverse, l'asse principale sarà verticale, ovvero scorrerà dall'alto verso il basso della pagina nella direzione di blocco. L'asse trasversale, invece, scorrerà lungo le righe.

Osserva questa figura per comprendere meglio il concetto alla base degli assi di Flexbox.

asse principale - L'asse principale di un contenitore flex è l'asse lungo il quale vengono disposti gli elementi flex.
main-start | main-end - Gli elementi flex vengono disposti all'interno del contenitore partendo da main-start e procedendo verso main-end.
main size - La larghezza o l'altezza di un elemento flex nella dimensione principale è la sua main size.
asse trasversale - L'asse perpendicolare all'asse primario, la cui direzione dipende dalla direzione dell'asse principale (orizzontale o verticale).
cross-start | cross-end - Le righe flex vengono riempite di elementi e inserite nel contenitore partendo dal lato cross-start del contenitore flex e procedendo verso il lato cross-end.
cross size - La larghezza o l'altezza di un elemento flex nella dimensione trasversale è la sua cross size.

Fonte: W3.org

Contenitori ed elementi flex

Il contenitore flex è un elemento genitore che raggruppa un insieme di elementi figli, ovvero gli elementi flex. Nella maggior parte dei casi, il contenitore definisce il layout e la posizione dei suoi elementi flex; tuttavia, gli elementi flex possono essere gestiti anche individualmente.

Per trasformare un elemento HTML in un contenitore flex devi usare la proprietà display con i valori flex (box contenitore flex a livello di blocco) o inline-flex (definisce un box contenitore flex a livello inline). In caso contrario, il browser ignorerebbe tutte le proprietà flexbox utilizzate.

Contenitore Flexbox

.container {
  display: flex; /* or inline-flex*/
}

Proprietà del contenitore flex

La proprietà flex-direction

La proprietà flex-direction si usa per creare layout a righe e a colonne. Specifica le direzioni dell'asse principale del contenitore flex e imposta l'ordine in cui appaiono gli elementi.

La proprietà flex-direction ha i seguenti valori:

row - gli elementi vengono visualizzati lungo la riga da sinistra a destra.
row-reverse - gli elementi vengono visualizzati da destra a sinistra.
column - gli elementi vengono visualizzati verticalmente dall'alto verso il basso.
column-reverse - gli elementi vengono visualizzati verticalmente dal basso verso l'alto.

Esempio della proprietà flex-direction:

Esempio della proprietà flex-direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        color: #8ebf42;
      }
      .flex-container {
        display: flex;
        flex-direction: row-reverse;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 80px;
        height: 70px;
        margin: 5px;     
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <h3>row-reverse</h3>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Nel nostro esempio gli elementi sono organizzati in ordine invertito. Cambia i valori della proprietà flex-direction (row, column, column-reverse) per vedere come cambia l'aspetto degli elementi.

Informazione

Nota: row e row-reverse dipendono dalla modalità di scrittura, quindi in un contesto rtl (da destra a sinistra) verranno invertiti di conseguenza.

La proprietà flex-wrap

Per impostazione predefinita, tutti gli elementi flex stanno su un'unica riga e, se sono troppo larghi per il contenitore, lo faranno traboccare. Per evitarlo, devi usare la proprietà flex-wrap per mandare a capo gli elementi.

La proprietà può accettare i seguenti valori:

nowrap (predefinito) - gli elementi flex vengono visualizzati su un'unica riga; per impostazione predefinita si adattano alla larghezza del contenitore flex.
wrap - gli elementi flex vengono visualizzati su più righe se necessario, da sinistra a destra e dall'alto verso il basso.
wrap-reverse - gli elementi flex vengono visualizzati su più righe se necessario, da sinistra a destra e dal basso verso l'alto.

Informazione

Nota: la proprietà dipende dalla modalità di scrittura, quindi in un contesto rtl (da destra a sinistra) verranno invertiti di conseguenza.

La proprietà justify-content

La proprietà justify-content si usa per definire l'allineamento orizzontale degli elementi lungo l'asse principale. Aiuta a distribuire lo spazio libero rimasto tra gli elementi flex sull'asse principale.

I valori di justify-content sono i seguenti:

flex-start (valore predefinito) - gli elementi vengono disposti all'inizio del contenitore.
flex-end - gli elementi vengono disposti alla fine del contenitore.
center - gli elementi vengono disposti al centro del contenitore.
space-between - gli elementi vengono distribuiti uniformemente nella riga (con spazio tra di loro); il primo elemento è sulla riga iniziale, l'ultimo sulla riga finale.
space-around - gli elementi vengono visualizzati con spazio prima, tra e dopo di essi.
space-evenly - gli elementi vengono distribuiti in modo che lo spazio tra due elementi qualsiasi (e lo spazio rispetto ai bordi) sia uguale.

Esempio della proprietà justify-content:

Proprietà justify-content, esempi

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        padding: 10px;
        margin-bottom: 20px;
        background-color: #1faadb;
      }
      .flex-start {
        justify-content: flex-start;
      }
      .flex-end {
        justify-content: flex-end;
      }
      .center {
        justify-content: center;
      }
      .space-between {
        justify-content: space-between;
      }
      .space-around {
        justify-content: space-around;
      }
      .flex-container > div {
        width: 28%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container > div.item-two {
        width: 18%;
      }
    </style>
  </head>
  <body>
    <p>flex-start</p>
    <div class="flex-container flex-start">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>flex-end</p>
    <div class="flex-container flex-end">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>center</p>
    <div class="flex-container center">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-between</p>
    <div class="flex-container space-between">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-around</p>
    <div class="flex-container space-around">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Cambia il valore della proprietà justify-content per vedere come vengono allineati gli elementi.

La proprietà align-items

La proprietà align-items si usa per allineare gli elementi lungo l'asse trasversale. È l'esatto opposto della proprietà justify-content, che allinea gli elementi lungo l'asse principale.

I valori di align-items sono i seguenti:

stretch (predefinito) - gli elementi vengono allungati per riempire il contenitore.
flex-start - gli elementi vengono impilati all'inizio (cross start) del contenitore.
flex-end - gli elementi vengono impilati alla fine (cross end) del contenitore.
center - gli elementi vengono impilati al centro dell'asse trasversale.
baseline - gli elementi vengono allineati in base alle loro linee di base.

Informazione

Nota: se l'altezza del contenitore flex è vincolata, il valore stretch può far traboccare il contenuto dell'elemento flex oltre l'elemento stesso.

Esempio della proprietà align-items:

Proprietà align-items, esempio di codice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center; /* Use another value to see the result */
        height: 250px;
        padding: 15px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 15%;
        height: 100%;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one {
        height: 60%;
      }
      .flex-container .three {
        height: 40%;
      }
      .flex-container .four {
        height: 70%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Nel nostro esempio abbiamo usato il valore center per centrare gli elementi sull'asse trasversale. Prova altri valori e osserva il risultato.

La proprietà align-content

La proprietà align-content si usa per allineare le righe di un contenitore flex all'interno del contenitore quando c'è spazio extra sull'asse trasversale, esattamente come justify-content allinea i singoli elementi lungo l'asse principale.

Informazione

Nota: la proprietà align-content non funziona quando nel contenitore flex c'è una sola riga.

I valori di align-content e il loro significato sono i seguenti:

stretch (predefinito) - le righe si allungano per occupare lo spazio disponibile.
flex-start - le righe vengono raggruppate all'inizio del contenitore.
flex-end - le righe vengono raggruppate alla fine del contenitore.
center - le righe vengono raggruppate al centro del contenitore.
space-between - le righe vengono distribuite uniformemente; la prima riga è all'inizio del contenitore, mentre l'ultima è alla fine.
space-around - le righe vengono distribuite uniformemente con uguale spazio attorno a ciascuna riga.

Esempio della proprietà align-content:

Esempio della proprietà align-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end/* Use another value to see the result */;
        min-height: 250px;
        padding: 10px;
        background-color: #1faadb;
      }
      .flex-container>div {
        width: 45%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one,
      .flex-container .nine {
        width: 23%;
      }
      .flex-container .two,
      .flex-container .six {
        width: 9%;
      }
      .flex-container .three {
        width: 25%;
      }
      .flex-container .four {
        width: 35%;
      }
      .flex-container .five,
      .flex-container .eleven {
        width: 32%;
      }
      .flex-container .seven,
      .flex-container .ten {
        width: 6%;
      }
    </style>
  </head>
  <body>
    <p>flex-end</p>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
      <div class="five"></div>
      <div class="six"></div>
      <div class="seven"></div>
      <div class="eight"></div>
      <div class="nine"></div>
      <div class="ten"></div>
      <div class="eleven"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

La proprietà gap

La proprietà gap si usa per definire lo spazio tra gli elementi flex.

La proprietà flex-flow

Questa è una proprietà shorthand per le singole proprietà flex-direction e flex-wrap, che definiscono insieme l'asse principale e l'asse trasversale del contenitore flex. Il valore predefinito è row nowrap.

Informazione

Nota: le direzioni di flex-flow dipendono dalla modalità di scrittura, quindi in un contesto rtl (da destra a sinistra) il contenuto verrà invertito di conseguenza.

Esempio della proprietà flex-flow:

Proprietà flex-flow, esempio di codice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title> 
    <style>
      .flex-container {
        display: flex;
        flex-flow: row-reverse wrap; /* Use another value to see the result */
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Puoi scegliere un altro valore per vedere come cambia la posizione degli elementi.

Proprietà degli elementi flex

La proprietà order

Per impostazione predefinita, gli elementi vengono disposti nell'ordine in cui appaiono nel codice sorgente (partendo dal gruppo ordinale con il numero più basso e salendo). Per cambiare l'ordine degli elementi nel contenitore flex si usa la proprietà order.

La proprietà order imposta l'ordine degli elementi flex assegnandoli a gruppi ordinali. Accetta un singolo valore intero, che definisce il gruppo ordinale a cui appartiene l'elemento flex. Il valore predefinito è 0.

Esempio della proprietà order:

Ordine della proprietà order di flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-flow: row wrap;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
      .item-one { 
        order: 1;
      }
      .item-four {
        order: -1;
      }
      .item-five { 
        order: 0;
      }
      .item-three { 
        order: 2;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one">1</div>
      <div class="item-two">2</div>
      <div class="item-three">3</div>
      <div class="item-four">4</div>
      <div class="item-five">5</div>
    </div>
  </body>
</html>

Provalo tu stesso »

La proprietà align-self

Questa proprietà si usa per allineare individualmente gli elementi all'interno del contenitore flex. Gli elementi flex vengono allineati sull'asse trasversale della riga del contenitore flex (proprio come justify-content, ma nella direzione perpendicolare). Quando viene impostata, la proprietà align-self ha la precedenza sull'allineamento specificato da align-items.

Informazione

Nota: se uno qualsiasi dei margini sull'asse trasversale dell'elemento è impostato su auto, align-self viene ignorato.

La proprietà align-self ha gli stessi valori di align-items. Sono elencati di seguito per comodità.

stretch (predefinito) - gli elementi vengono allungati per riempire il contenitore.
flex-start - gli elementi vengono impilati all'inizio (cross start) del contenitore.
flex-end - gli elementi vengono impilati alla fine (cross end) del contenitore.
center - gli elementi vengono impilati al centro dell'asse trasversale.
baseline - gli elementi vengono allineati in base alle loro linee di base.

Esempio della proprietà align-self:

Esempio della proprietà align-self

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        height: 300px;
        padding: 10px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        height: 80%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      div.item-two {
        width: 20%; 
      }
      div.item-three {
        align-self: flex-end;
        height: 80px; 
        margin: 0 10%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one"></div>
      <div class="item-two"></div>
      <div class="item-three"></div>
      <div class="item-four"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

La proprietà flex-grow

La proprietà flex-grow definisce la capacità di un elemento di crescere se necessario. Imposta il fattore di crescita flex (relativamente agli altri elementi all'interno di un contenitore), che specifica lo spazio che l'elemento dovrebbe occupare nel contenitore quando si distribuisce lo spazio positivo.

La proprietà accetta un valore senza unità di misura che funge da proporzione.

Informazione

Nota: il valore non può essere un numero negativo.

Se tutti gli elementi nel contenitore hanno lo stesso valore di flex-grow (ad esempio, 1), allora tutti gli elementi avranno la stessa dimensione nel contenitore.

Se la dimensione di uno degli elementi flex è diversa (ad esempio, 2), questo elemento occuperà il doppio dello spazio rispetto alla dimensione degli altri elementi (la cui dimensione è impostata su 1).

Esempio della proprietà flex-grow:

Proprietà flex-grow, esempio di codice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        margin-bottom: 20px;
      }
      .flex-container div {
        flex-grow: 0.2;
        padding: 30px 5px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-grow: 5;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div><span>5</span>
      </div>
    </div>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Provalo tu stesso »

Suggerimento

Consigliamo di usare la proprietà shorthand flex invece di flex-grow per controllare la flessibilità, poiché reimposta correttamente eventuali componenti non specificati per adattarsi agli usi più comuni.

La proprietà flex-shrink

La proprietà flex-shrink viene impostata per permettere a un elemento flex di restringersi. Specifica lo spazio che l'elemento dovrebbe occupare nel contenitore quando si distribuisce lo spazio negativo.

La proprietà accetta un valore senza unità di misura.

Informazione

Nota: il valore non può essere un numero negativo.

Per impostazione predefinita, tutti gli elementi flex possono restringersi, ma se impostiamo il valore su 0 (non restringere) manterranno la dimensione originale.

Esempio della proprietà flex-shrink:

Esempio della proprietà flex-shrink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
      }
      .flex-container div {
        width: 120px;
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-shrink: 0;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
      <div>
        <span>6</span>
      </div>
    </div>
  </body>
</html>

Provalo tu stesso »

Suggerimento

Consigliamo di usare la proprietà shorthand flex invece di flex-shrink per controllare la flessibilità, poiché reimposta correttamente eventuali componenti non specificati per adattarsi agli usi più comuni.

La proprietà flex-basis

La proprietà flex-basis imposta la dimensione iniziale di un elemento flex, prima che lo spazio rimanente venga distribuito in base ai fattori flex. La proprietà viene specificata tramite la parola chiave content o tramite width.

I valori di flex-basis sono i seguenti:

auto (predefinito) - la lunghezza è uguale alla lunghezza dell'elemento flessibile.
width - una lunghezza assoluta, o una percentuale della main size del contenitore flex genitore, oppure la parola chiave auto. I valori negativi non sono validi.
content - determina il dimensionamento automatico in base al contenuto dell'elemento flex.
initial - imposta questa proprietà al suo valore predefinito.

Informazione

Nota: la proprietà content non è ancora ben supportata, quindi non è facile capire cosa facciano i suoi "parenti" max-content, min-content e fit-content.

Esempio della proprietà flex-basis:

Proprietà flex-basis, esempio di codice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        background-color: #8ebf42;
      }
      .flex-container div {
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
        background-color: #fff;
      }
      .flex-container div.four {
        flex-basis: 25%;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div class="four">
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Provalo tu stesso »

La proprietà flex

La proprietà flex è lo shorthand per flex-grow, flex-shrink e flex-basis insieme. flex-shrink e flex-basis sono facoltativi.

Tra gli altri valori, questa proprietà può accettare auto (1 1 auto) o none (0 0 auto).

Suggerimento

Consigliamo vivamente di usare la proprietà shorthand flex invece delle singole proprietà.

Esempio della proprietà flex:

flex invece di flex-shrink, esempio di codice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        height: 150px;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .second > div {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="flex-container second">
      <div></div>
      <div></div>
      <div></div>
    </div> 
  </body>
</html>

Provalo tu stesso »

Informazione

Nota: le proprietà CSS float, clear e vertical-align non hanno alcun effetto sugli elementi flex.

Esempi di Flexbox

Diamo un'occhiata ad alcuni esempi di flexbox CSS per vedere che tipo di layout puoi usare nei tuoi progetti web.

Centrare gli elementi verticalmente e orizzontalmente

Centrare gli elementi con tutti i mezzi disponibili in CSS è sempre stato un problema. Con l'avvento di Flexbox questo problema si risolve facilmente. Con le proprietà align-items, align-self e justify-content puoi allineare gli elementi sia verticalmente che orizzontalmente.

Esempio delle proprietà align-items, align-self e justify-content per centrare gli elementi verticalmente e orizzontalmente:

Centrare gli elementi verticalmente e orizzontalmente con Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 70px;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Barra di navigazione responsive con ricerca

Usando Flexbox puoi creare una barra di navigazione con le voci di menu allineate a sinistra e la barra di ricerca allineata a destra (o viceversa). La barra di navigazione è responsive: si espande o si comprime a seconda della dimensione dello schermo.

Esempio della barra di navigazione responsive:

Esempio di navbar con flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main-nav {
        display: flex;
        padding: 15px;
        border-radius: 5px;
        background: #1c87c9;
        color: #fff;
        font-weight: 500;
      }
      .main-nav > ul {
        display: flex;
        flex: 2;
        padding: 0;
        margin: 0;
        list-style-type: none;
      }
      .main-nav li {
        margin-right: 20px;
      }
      .main-nav > form {
        display: flex;
        justify-content: flex-end;
        flex: 1;
      }
      .main-nav input {
        flex: 1;
        padding: 5px;
      }
      .main-nav button {
        padding: 0 20px;
        margin-left: 10px;
        border: 0;
        border-radius: 20px;
        background: #fff;
        color: #666;
      }
      @media screen and (max-width: 575px) {
        .main-nav {
          flex-direction: column;
        }
        .main-nav ul {
          margin-bottom: 10px;
        }
      }
    </style>
  </head>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Home</li>
        <li>About us</li>
        <li>Services</li>
        <li>Contact us</li>
      </ul>
      <form>
        <input type="search" placeholder="Search" />
        <button type="button">Go</button>
      </form>
    </nav>
  </body>
</html>

Il layout Holy Grail

Lo schema di layout Holy Grail è molto diffuso sul web. Comprende un'intestazione, un piè di pagina, l'area dei contenuti principali con una navigazione a larghezza fissa a sinistra, i contenuti al centro e una barra laterale a larghezza fissa a destra.

Esempio del layout Holy Grail:

Esempio di layout Holy Grail con flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
        font-size: 18px;
      }
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }
      .main {
        display: flex;
        flex: 1;
      }
      .main > article {
        flex: 1;
      }
      .main > nav,
      .main > aside {
        flex: 0 0 20vw;
        background: #d5dce8;
      }
      .main > nav {
        order: -1;
      }
      header,
      footer {
        background: #1c87c9;
        height: 15vh;
      }
      header,
      footer,
      article,
      nav,
      aside {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <div class="main">
      <article>Article</article>
      <nav>Nav</nav>
      <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>

Pratica

Which of the following are properties of Flexbox in CSS?