I layout basati su box flessibili consentono di allineare elementi e distribuire lo spazio tra di essi in modo più semplice dei layout realizzati mediante la proprietà float. 

Il modello prevede che le regole applicate a un elemento, detto contenitore flex, dispongano automaticamente gli elementi contenuti direttamente al suo interno.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <!-- ... -->
</div>

Un elemento diventa un contenitore flex impostando la proprietà display con il valore flex.

.flex-container{
   /* …*/
   display: flex;
}

Dopo aver impostato il modello flex box a un elemento sarà possibile gestire gli elementi presenti al suo interno in modo semplice e veloce.

css flex: utilizzare la proprietà display per utilizzare il modello di layout flex box

css flex: utilizzare la proprietà display per utilizzare il modello di layout flex box

Gli elementi interni sono diventati ora flessibili e la loro posizione può essere controllata mediante una serie di proprietà assegnate al loro contenitore. Le proprietà del modello flex, che possono essere assegnate al contenitore sono:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

La proprietà flex-direction

La proprietà flex-direction indica la direzione in cui si dispongono gli elementi flessibili rispetto agli assi principali (orizzontale e verticale) del contenitore.

.flex-container{
  /* …*/
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

Il valore predefinito è row che dispone gli elementi su una riga a partire dal lato sinistro del contenitore.

css flex: la proprietà flex-direction

css flex: la proprietà flex-direction

La proprietà flex-wrap

Specifica se gli elementi devono andare a capo quando non possono essere visualizzati sulla stessa linea.

.flex-container{
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Il valore predefinito è nowrap e dispone gli elementi su una stessa linea anche e se lo spazio non è sufficiente gli elementi sono visualizzati fuori dal contenitore.

css-flex: la proprietà flex-wrap

css-flex: la proprietà flex-wrap

La proprietà flex-flow

La proprietà flex-flow è una scorciatoia per impostare le proprietà flex-direction e flex-wrap con una sola dichiarazione, come nel seguente esempio.

.flex-container{
  display: flex;
  flex-flow: row wrap;
}

I valori ammessi sono quelli disponibili per le proprietà flex-direction e flex-wrap a cui si rimanda per la descrizione.

La proprietà justify-content

Allinea gli elementi rispetto al loro contenitore e distribuisce lo spazio libero.

.flex-container{
   display: flex;
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Il valore predefinito è flex-start, che dispone gli elementi a partire dall’inizio del contenitore.

css-flex: la proprietà justify-content

La proprietà align-item

Allinea verticalmente gli elementi presenti nel contenitore a cui è applicata.

.flex-container{
   display: flex;
   height: 100px;
   align-items: stretch | center | flex-start | flex-end | baseline;
}

Il valore predefinito è stretch che adatta l’altezza degli elementi a quella del contenitore in cui si trovano annidati.

css-flex: la proprietà align-items

css-flex: la proprietà align-items

Il valore baseline (non mostrato nell’immagine) allinea gli elementi sulla linea base del testo.

 

Altre informazioni sono disponibili nella pagina ufficiale della specifica pubblicata dal W3C il 19/11/2018, con il nome CSS Flexible Box Layout Module Level 1.