logo Portale zerozetasm.it



FLEX-BOX: Teoria e Pratica

01. Visione d'insieme

La specifica W3C: candita raccomandazione del 19 novembre 2018 "flexbox" ( https://www.w3.org/TR/css-flexbox-1/ ).
Ha introdotto il concetto di Layout flex, che permette un sistema più efficiente per disporre gli elementi e allinearli nel loro contenitore, soprattutto quando la dimensione del contenitore non è nota o può cambiare.

Questo è fondamentale quando si crea un layout che potrebbe essere visualizzato da dispositivi di dimensioni diverse o che si possono ruotare (come lo schermo di smartphone e tablet).

In un contenitore flex, l’elemento contenitore può modificare la larghezza, l’altezza e l’ordine degli elementi contenuti in modo da adattarsi al meglio a ogni tipo di dispositivo.

Un Layout flex o flexBox espande o riduce le dimensioni degli elementi per occupare tutto lo spazio disponibile, se ce n’è, o per evitare che gli elementi si sovrappongano, se non c’è spazio sufficiente.



02. Facciamo un esempio
In questo esepio abbiamo un elemento <header> per l'intestazione del titolo, un elemento contenitore <section> con al suo interno tre elementi <article> con i suoi paragrafi. Un layout abbastanza standard che trasformeremo in un layout flexBox.

Immagine del modello HtmL


All'inizio dobbiamo scegliere e selezionare l'elemento che deve essere impostato come contenitore flexbox.
Scegliamo il contenitore naturale <section> e lo impostiamo con la proprietà e valore display: flex;
di conseguenza i suoi elementi <article> diventano elementi di un contenitore flessibile.
Questo è gia sufficiente per ottenere delle colonne multiple:
aggiungere il codice
  
section {
  display: flex;
}
e otterremo


Quindi, questa singola dichiarazione ci dà già molto. Abbiamo il nostro layout a colonne multiple di uguale dimensione e stessa altezza.
Questo perché i valori predefiniti forniti con il Layout flex per i figli del contenitore flessibile, sono impostati proprio per risolvere questo tipo di problemi.

Codice completo 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Esempio Flexbox</title>
  <style>
body {
  font-family: Verdana,sans-serif;
  font-size: 90%;
  margin: 0;
}
header {
  background: purple;
  height: 70px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 70px;
  margin: 0;
}
article {
  padding: 7px;
  margin: 7px;
  background: aqua;
}
  /* Aggiungere quì le proprietà del css per il flexbox */
section {
  display: flex;
}
  </style>
</head>
<body>
  <header>
    <h1>Esempio costruzione flexbox</h1>
  </header>
  <section>
    <article>
      <h2>Primo articolo</h2>
      <p>In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali.
      In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali.
      </p>
    </article>
    <article>
      <h2>Secondo articolo</h2>
      <p>In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali.
        Vivono isolati nella cittadina di Lettere, sulle coste del Semantico, un immenso oceano linguistico.</p>
    </article>
    <article>
      <h2>Terzo articolo</h2>
      <p>In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali.
         Vivono isolati nella cittadina di Lettere, sulle coste del Semantico, un immenso oceano linguistico.</p>
      <p>Un giorno diverò accadde che la diviccola riga di un testo casuale, di nome Lorem idivsum, decise di andare a esdivlorare la vasta Grammatica. Il grande Oximox tentò di dissuaderla, divoiché quel luogo divullulava di virgole sdivietate.</p>
    </article>
  </section>
</body>
</html>


03. Come funziona il modello FlexBox
Nel modello flexBox o Layout flex gli elementi sono disposti come box flessibili, e sono disposti lungo due assi.

Inoltre è necessario un contenitore flex e degli elementi flex che in questo contenitore si dispongono, si ridimensionano e si spostano a seconda delle dimensioni disponibili.

Analizzando la figura che segue possiamo dedurre che:


Schema FexBox

L'Asse orizzontale di un contenitore flex è l’asse lungo cui gli elementi flex possono essere disposti partendo dal punto
Inizio area principale fino al punto Fine area principale   
Ma può anche andare dal punto Fine area principale al punto Inizio area principale    e la posizione dei due punti determina la Dimensione principale.

Come dice la parola stessa l'Asse verticale risulta perpendicolare e valgono le stesse regole elencate per l'Asse orizzontale e si estende fra Inizio area trasversale fino al punto Fine area trasversale    e il suo percorso inverso che estende fra Fine area trasversale al punto Inizio area trasversale     e la posizione dei due punti determina la Dimensione trasversale.



04. Circa l'esempio
Flexbox fornisce una proprietà chiamata flex-direction che specifica in quale direzione viene eseguito l'asse principale, ovvero in quale direzione sono disposti i figli del contenitore.
Per impostazione predefinita viene impostato su row cioè sulle righe.
Se noi aggiungiamo la dichiarazione flex-direction: column; sempre sul contenitore, possiamo vedere che gli elementi nel layout si rimettono in colonna, proprio come prima di aggiungere qualsiasi altra proprietà flex-Css.

E ritorneremo al modello HtmL iniziale

Si possono anche disporre gli elementi flessibili in una direzione inversa usando i valori flex-direction: row-reverse; (da destra a sinistra) e flex-direction: column-reverse; (dal basso verso l'alto.)


05. Un nuovo esempio
Un problema che si presenta quando si dispone di una quantità fissa di larghezza o altezza nel layout-standard è che alla fine gli elementi figli trabocchino il loro contenitore, rompendo il layout.
come nel caso che segue:


Possiamo constatare che gli elementi stanno davvero uscendo dal loro contenitore. Un modo in cui si può risolvere questo problema è aggiungere le seguenti dichiarazioni alla regola:
  
section {
 flex-wrap: wrap;
}
article {
 flex: 200px;
 flex: 1;
}
e otterremo:


Come possiamo vedere l'eventuale overflow viene spostato alla riga successiva. La dichiarazione flex: 200px impostata sugli articoli indica che ciascuna sarà larga almeno 200 px.
article {flex: 1;} questo valore proporzionale senza unità determina la quantità di spazio disponibile lungo l'asse principale che ciascun oggetto flessibile occuperà. In questo caso, diamo ad ogni elemento <article> un valore proporzianale pari a 1, il che significa che prenderanno tutti una quantità uguale dello spazio rimasto, dopo che padding e margine sono state impostate.
Notiamo inoltre che gli articoli nell'ultima fila vengono ingranditi in modo che l'intera riga sia ancora piena.

Codice completo 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Esempio-2 Flexbox</title>
<style>
body {
  font-family: Verdana,sans-serif;
  font-size: 90%;
  margin: 0;
}
header {
  background: purple;
  height: 70px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 70px;
  margin: 0;
}
article {
  padding: 7px;
  margin: 7px;
  background: aqua;
}
/* Aggiungere quì le proprietà del css per il flexbox */
section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
article {
  flex: 200px;
  flex: 1;
}
</style>
</head>

<body>
  <header>
    <h1>Esempio costruzione flexbox</h1>
  </header>

  <section>
    <article>
      <h2>Primo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Secondo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly,  PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Terzo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly,  PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Quarto articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly,  PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Quinto articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly,  PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Sesto articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly,  PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Settimo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly,  PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Ottavo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Nono articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
      <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
    </article>
    <article>
      <h2>Decimo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Undicesimo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>
    <article>
      <h2>Dodicesimo articolo</h2>
      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
      <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
    </article>
  </section>
</body>
</html>

06. Le proprietà del flexBox
NOTA: Delle 13 proprietà "Css3" che permettono di costruire un Layout flex, 7 si applicano al CONTENITORE flex, e 5 agli elementi flex contenuti.

Le proprietà e i loro valori che si applicano al CONTENITORE flex sono:
display:
display: flex;    E' il valore  flex  CHE trasforma un box in un flex-box;
flex-direction:
flex-direction: E' la proprietà che specifica la direzione sui due Assi ORIZZONTALE e VERTICALE del contenitore flex.
I QUATTRO valori possibili sono:
- row:   gli elementi si dispongono in riga da sinistra a destra;
- row-reverse:   gli elementi si dispongono in riga da destra a sinistra;
- column:   gli elementi si dispongono in colonna dall’alto in basso;
- column-reverse:   gli elementi si dispongono in colonna dal basso all’alto.
flex-wrap:
flex-wrap: specifica se gli elementi contenuti nel contenitore possono disporsi su una sola linea o su più linee.
I TRE valori possibili sono:
- nowrap: indica che gli elementi si disporranno su un’unica linea;
- wrap: indica che è consentita la disposizione su più linee.
Le linee successive alla prima mantengono la direzione (se specificata) dalla proprietà flex-direction;
- wrap-reverse: indica che è consentita la disposizione su più linee.
Le linee successive alla prima adottano una direzione inversa rispetto a quella specificata dalla proprietà flex-direction;
justify-content:
justify-content: specifica come si dispongono gli elementi nello spazio disponibile lungo l'Asse orizzontale.
I CINQUE valori possibili sono:
- flex-start: gli elementi sono posizionati all’inizio del contenitore;
- flex-end: gli elementi sono posizionati alla fine del contenitore;
- center: gli elementi sono posizionati al centro del contenitore;
- space-between: gli elementi sono distribuiti dall’inizio alla fine del contenitore frapponendo spazio vuoto fra l’uno e l’altro (ma non ai lati) per riempire tutto lo spazio disponibile;
- space-around: gli elementi sono distribuiti dall’inizio alla fine del contenitore. Lo spazio vuoto risultante è uniformemente ripartito prima del primo elemento, dopo l’ultimo e fra gli elementi stessi.
align-items:
align-items: definisce l’allineamento degli elementi lungo l'Asse verticale.
I CINQUE valori possibili sono:
- stretch: gli elementi sono allungati o allargati fino a riempire tutto il contenitore;
- center: gli elementi sono posti al centro del contenitore;
- flex-start: gli elementi sono posti all’inizio del contenitore;
- flex-end: gli elementi sono posti alla fine del contenitore;
- baseline: gli elementi sono posti sulla linea di base del contenitore;
align-content:
align-content: definisce l’allineamento di elementi multiriga lungo l'Asse verticale.
I valori possibili sono analoghi a quelli per la proprietà justify-content.
A questi si aggiunge il valore stretch con il quale gli elementi sono allungati o allargati per occupare tutto lo spazio disponibile.
flex-flow:
NOTA: Le proprietà flex-direction e flex-wrap possono essere abbreviate e riassunte nella proprietà flex-flow ovvero:
flex-flow = | flex-direction | + | flex-wrap |


07. Proprietà di elementi flex contenuti

Le proprietà e i loro valori che si applicano agli elementi flex contenuti sono:

order:
- order: specifica l’ordine in cui viene mostrato un elemento contenuto rispetto agli altri elementi contenuti nello stesso contenitore;
I CINQUE valori possibili sono:
1 | 2 | 3 | 4 | 5; rappresentano l'ordine posizionale di un elemento rispetto ad un altro
align-self:
- align-self: permette di specificare l’allineamento di un singolo elemento rispetto al contenitore, sovrascrivendone il valore definito con la proprietà align-items:
I CINQUE valori possibili sono gli stessi visti per align-items:
stretch | center | flex-start | flex-end | baseline;
flex-grow:
- flex-grow: è un numero che specifica di quanto deve aumentare un elemento contenuto rispetto agli altri elementi contenuti nello stesso contenitore. In pratica consente di impostare il fattore di ingrandimento di un box rispetto agli altri quando si distribuisce lo spazio disponibile;
I CINQUE valori possibili sono:
1 | 2 | 3 | 4 | 5; rappresentano il fattore di ingrandimento di un elemento rispetto ad un altro
flex-shrink:
- flex-shrink: è l’opposto di flex-grow e indica di quanto si può restringere un elemento rispetto agli altri nello stesso contenitore. In pratica consente di impostare il fattore di restringimento di un box rispetto agli altri quando si distribuisce lo spazio disponibile;
I CINQUE valori possibili sono:
1 | 2 | 3 | 4 | 5; rappresentano il fattore di restringimento di un elemento rispetto ad un altro
flex-basis:
- flex-basis indica la dimensione iniziale di un elemento.
I VALORI possibili sono tutti quelli dimensionale
auto | 100px | 50em | 60%; rappresenta l'indicazione della dimensione iniziale dell'elemento a cui si riferisce.

flex:
NOTA: Le proprietà flex-grow,   flex-shrink  e   flex-basis   possono essere abbreviate e riassunte nell'ordine indicato,
con la proprietà riassuntiva flex: 1 | 2 | 3 | 4 | 5;   ||   1 | 2 | 3 | 4 | 5;   ||   100px | 50em | 60%;



08. Sintesi Proprietà Flexbox
Una sintesi delle Proprietà Flexbox per poterle ricordare con più facilità.
NOTA:   row: LE METTE IN RIGA (uno in fila all'altro)   ---  mentre column: LE METTE A PILA (uno sopra l'altro)

Le 7 proprietà che si applicano all'elemento "CONTENITORE flex" Sono:

.CONTENITORE {display: flex|inline-flex;}
trasforma un box in un box flex
.CONTENITORE {flex-wrap: nowrap|wrap|wrap-reverse;}
specifica se in linea ('nowrap') o multilinea ('wrap') più linee
.CONTENITORE {flex-direction: row|row-reverse|column|column-reverse;}
specifica la direzione dell'ASSE ORIZZONTALE
.CONTENITORE {flex-flow: row|row-reverse|column|column-reverse|nowrap|wrap|wrap-reverse;}
flex-flow = flex-direction + flex-wrap
.CONTENITORE {justify-content: flex-start|flex-end|center|space-between|space-around;}
ASSE ORIZZONTALE MonoRiga Orizzontale
.CONTENITORE {align-items: stretch|flex-start|flex-end|center|baseline;}
ASSE VERTICALE MonoRiga Verticale
.CONTENITORE {align-content: stretch|flex-start|flex-end|center|space-between|space-around;}
ASSE VERTICALE MultiRiga Verticale

Le 5 proprietà che si applicano all'elemento "flex contenuto" Sono:

.contenuto {align-self: stretch|center|flex-start|flex-end|baseline;}
sovrascrive il valore definito nel CONTENITORE di align-items
.contenuto {order: 1|2|3|4|5;}
ordine di un elemento rispetto ad un altro
.contenuto {flex-grow: 1|2|3|4|5;}
ingrandimento-ZooM quante volte specificato di un elemento rispetto ad un altro
.contenuto {flex-shrink: 1|2|3|4|5;}
riduzione-ZooM quante volte specificato di un elemento rispetto ad un altro
.contenuto {flex-basis: 100px|50em|60%;}
dimensione Orizzontale iniziale di un elemento

proprietà abbrevita-riassuntiva e di default

.contenuto {flex: 1|2|3|4|5; || 1|2|3|4|5; || 100px|50em|60%;}
flex = flex-grow + flex-shrink + flex-basis
.contenuto {flex: 0 0 auto;}
default

Proprietà Predefinite di default:

.CONTENITORE-FLEX {
 display: flex;  /* default */
 flex-direction: row;  /* default */
 flex-wrap: nowrap;  /* default */
 justify-content: flex-start;  /* default */
 align-items: flex-start;  /* default */
 align-content: flex-start;  /* default */
}


.contenuto-Flex {
 order: 0;  /* default */
 align-self: flex-start;  /* default */
 flex: 0 0 auto;  /* default */
}
|--- Fine Sintesi Proprietà ---|

Esempi applicati
NOTA: Nel corso delle spiegazioni lo stile sotto descritto, verrà assunto negli ESEMPI, al solo scopo di rendere evidente la colorazione del layout, altrimenti non visibile. 

.contenitore {  
  width: 200px;
  height: 200px;    
  background-color: #ff80ab;
  margin-bottom: 1rem;
}
.box1, .box2, .box3, .box4, .box5, .box5, .box6, .box7, .box8 {  
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem; 
  background-color: #1ef876;
  border: 1px solid #fff;
  text-align: center;  
}
E in linea di massima sarà applicato (in parte o completamente) il codice HtmL sottostante. 

<div class="contenitore">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
  <div class="box6">6</div>
  <div class="box7">7</div>
  <div class="box8">8</div>
</div>

Codice esempi da copiare 
<!-- Copiare questo codice su una nuova pagina -->
<!DOCTYPE html>
<html lang="it">
<head>
 <title>esempi</title>
 <meta charset="UTF-8">
<style type="text/css">
.contenitore {  
  width: 200px;
  height: 200px;    
  background-color: #ff80ab;
  margin-bottom: 1rem;
}
.box1, .box2, .box3, .box4, .box5, .box5, .box6, .box7, .box8 {  
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem; 
  background-color: #1ef876;
  border: 1px solid #fff;
  text-align: center;  
}
</style>  
</head>

<body>
<!-- Inserire il codice html degli esempi sotto questa riga -->


</body>
</html>


CONTENITORE FLEXBOX
Proprietà e valori che si applicano al CONTENITORE flex.


09. ESEMPIO: flex-direction

Regola la scelta dell'asse lungo il quale il contenitore allinea gli elementi e la loro direzione.

row
1
2
3
.contenitore {
display: flex;
flex-direction:row;
}
row-reverse
1
2
3
.contenitore {
display: flex;
flex-direction: row-reverse;
}
column
1
2
3
.contenitore {
display: flex;
flex-direction: column;
}
column-reverse
1
2
3
.contenitore {
display: flex;
flex-direction: column-reverse;
}

Codice 

  <div class="row">
    <div class="col-xl-auto">
      <div class="contenitore" style="display: flex; flex-direction:row;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display: flex; flex-direction:row-reverse;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display: flex; flex-direction:column;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display: flex; flex-direction:column-reverse;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>    
  </div>

10. ESEMPIO: flex-wrap

definisce se gli elementi devono essere distribuiti lungo l'asse oppure no. Definisce inoltre la direzione di distribuzione.

nowrap
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: nowrap;
}
wrap
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: wrap;
}
wrap-reverse
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: wrap-reverse;
}

Codice 

  <div class="row">
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; flex-wrap:nowrap; width:auto;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display: flex; flex-wrap: wrap;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display: flex; flex-wrap: wrap-reverse;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
  </div>


11. ESEMPIO: justify-conten

Definisce la gestione dello spazio residuo tra gli elementi lungo l'asse orizzontale: flex-direction: row;

flex-start
1
2
3
.contenitore {
display: flex;
justify-content: flex-start
}
flex-end
1
2
3
.contenitore {
display: flex;
justify-content: flex-end
}
center
1
2
3
.contenitore {
display: flex;
justify-content: center
}
space-between
1
2
3
.contenitore {
display: flex;
justify-content: space-between
}
space-around
1
2
3
.contenitore {
display: flex;
justify-content: space-around
}
ESEMPIO: justify-conten

Definisce la gestione dello spazio residuo tra gli elementi lungo l'asse verticale: flex-direction: column;

flex-start
1
2
3
.contenitore {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
flex-end
1
2
3
.contenitore {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
center
1
2
3
.contenitore {
display: flex;
flex-direction: column;
justify-content: center;
}
space-between
1
2
3
.contenitore {
display: flex;
flex-direction: column;
justify-content: space-between;
}
space-around
1
2
3
.contenitore {
display: flex;
flex-direction: column;
justify-content: space-around;
}

Codice 

  <div class="row">
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; justify-content:flex-start;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; justify-content:flex-end;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; justify-content:center;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; justify-content:space-between;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; justify-content:space-around;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
  </div>
  
  <div class="row">
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; flex-direction: column; justify-content:flex-start;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; flex-direction: column; justify-content:flex-end;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; flex-direction: column; justify-content:center;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; flex-direction: column; justify-content:space-between;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; flex-direction: column; justify-content:space-around;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
  </div>


12. ESEMPIO: align-items

Definisce la distribuzione dello spazio residuo tra gli elementi lungo l'asse orizzontale.
stretch allunga gli elementi per coprire l'intera altezza del contenitore, eliminando lo spazio residuo.
baseline allinea gli elementi seguendo la linea di base del testo in essi contenuto. Come si può osservare nell'esempio, il testo dei tre elementi ha dimensione differente. L'elemento con il testo di dimensioni maggiori viene posizionato all'inizio dell'asse e gli altri elementi vi si allineano seguendo la base del testo.

flex-start
1
2
3
.contenitore {
display: flex;
align-items: flex-start;
}
flex-end
1
2
3
.contenitore {
display: flex;
align-items: flex-end;
}
center
1
2
3
.contenitore {
display: flex;
align-items: center;
}
stretch
1
2
3
.contenitore {
display: flex;
align-items: stretch;
}
baseline
1
2
3
.contenitore {
display: flex;
align-items: baseline;
}

Codice 

  <div class="row">
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-items:flex-start;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-items:flex-end;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-items:center;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-items:stretch;">
        <div class="box1" style="min-height: 2.5rem;height: auto;">1</div>
        <div class="box2" style="min-height: 2.5rem;height: auto;">2</div>
        <div class="box3" style="min-height: 2.5rem;height: auto;">3</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-items:baseline;">
        <div class="box1">1</div>
        <div class="box2" style="font-size: 120%;">2</div>
        <div class="box3" style="font-size: 150%;">3</div>
      </div>	
    </div>
  </div>

13. ESEMPIO: align-content

Funziona esattamente come justify-content, ma si applica all'asse verticale. e ha bisogno del flex-wrap:wrap; per scorrere su più righe.

flex-start
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
flex-end
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
center
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: wrap;
align-content: center;
}
space-between
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
space-around
1
2
3
4
5
6
7
8
.contenitore {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}

Codice 

  <div class="row">
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-content:flex-start; flex-wrap:wrap;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-content:flex-end; flex-wrap:wrap;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-content:center; flex-wrap:wrap;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-content:space-between; flex-wrap:wrap;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
    <div class="col-xl-auto">
      <div class="contenitore" style="display:flex; align-content:space-around; flex-wrap:wrap;">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
      </div>	
    </div>
  </div>

ELEMENTI CONTENUTI
Gli elementi figli del contenitore hanno delle proprietà che ci permettono di attribuire loro comportamenti collettivi o individuali.

14. ESEMPIO: order
order definisce la posizione dell'elemento nell'ordine degli elementi. Se order non è impostato, gli elementi vengono ordinati secondo il loro ordine di creazione, il primo order impostato si colloca alla fine degli elementi non impostati.
Accetta solo un valore numerico positivo.

order
1
2
3
4
5
6
7
8
.contenitore { display: flex; }
.box1 { order: 2; }
.box2 { order: 1; }
.box3 { order: 4; }
.box4 { order: 3; }


Codice 

<div class="contenitore" style="display:flex;width: auto;">
  <div class="box1" style="order:2; color:red;">1</div>
  <div class="box2" style="order:1; color:red;">2</div>
  <div class="box3" style="order:4; color:red;">3</div>
  <div class="box4" style="order:3; color:red;">4</div>
  <div class="box5">5</div>
  <div class="box6">6</div>
  <div class="box7">7</div>
  <div class="box8">8</div>
</div>

15. ESEMPIO: flex-grow
flex-grow stabilisce l'ordine di ridimensionamento degli elementi: più alto è il valore più l'elemento si espande per occupare lo spazio residuo. è necessario specificare un valore di base (ad esempio flex-grow: 1;) per gli elementi che non devono espandersi.

flex-grow
1x2
2
3
4
5x3
6
7
8x4
.contenitore1 { display: flex; }
.box1 { flex-grow: 2; }
.box2 { flex-grow: 1; }
.box3 { flex-grow: 1; }
.box4 { flex-grow: 1; }
.box5 { flex-grow: 3; }
.box6 { flex-grow: 1; }
.box7 { flex-grow: 1; }
.box8 { flex-grow: 4; }


Codice 

<div class="contenitore1" style="display:flex;width:100%;height:160px;background-color: #ff80ab;">
  <div class="box1" style="flex-grow: 2;">1x2</div>
  <div class="box2" style="flex-grow: 1;">2</div>
  <div class="box3" style="flex-grow: 1;">3</div>
  <div class="box4" style="flex-grow: 1;">4</div>
  <div class="box5" style="flex-grow: 3;">5x3</div>
  <div class="box6" style="flex-grow: 1;">6</div>
  <div class="box7" style="flex-grow: 1;">7</div>
  <div class="box8" style="flex-grow: 4;">8x4</div>
</div>

16. ESEMPIO: flex-shrink
flex-shrink come flex-grow: più alto è il valore più l'elemento si restringe.
Non è necessario specificare un valore di base flex-shrink: 1;, ma gli elementi devono avere una dimensione di base (.flex-bsis)

flex-shrink
1
2
3
4
5
6
7
8
.contenitore1 { display: flex; }
.box1 { flex-basis: 100px; }
.box2 { flex-basis: 100px; }
.box3 { flex-shrink: 3; }
.box4 { flex-basis: 100px; }
.box5 { flex-basis: 100px; }
.box6 { flex-basis: 100px; }
.box7 { flex-basis: 100px; }
.box8 { flex-basis: 100px; }


Codice 

<div class="contenitore1" style="display:flex;width:100%;height:100px;background-color: #ff80ab;">
  <div class="box1" style="flex-basis:100px;">1</div>
  <div class="box2" style="flex-basis:100px;">2</div>
  <div class="box3" style="flex-shrink: 3;">3</div>
  <div class="box4" style="flex-basis:100px;">4</div>
  <div class="box5" style="flex-basis:100px;">5</div>
  <div class="box6" style="flex-basis:100px;">6</div>
  <div class="box7" style="flex-basis:100px;">7</div>
  <div class="box8" style="flex-basis:100px;">8</div>
</div>

17. ESEMPIO: flex-basis
flex-basis stabilisce la dimensione base che gli elementi devono raggiungere prima di iniziare la gestione dello spazio residuo.

flex-basis
1
2
3
4
5
6
7
8
.contenitore1 { display: flex; }
.box3 { flex-basis: 200px; }

Codice 

<div class="contenitore1" style="display:flex;width:100%;height:100px;background-color: #ff80ab;">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3" style="flex-basis: 200px;">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
  <div class="box6">6</div>
  <div class="box7">7</div>
  <div class="box8">8</div>
</div>

18. ESEMPIO: align-self
align-self sovrascrive l'allineamento predefinito per l'elemento.


align-self
1
2
3
4
5
6
7
8
.contenitore1 { display: flex; }
.box3 { align-self: center; }

Codice 

<div class="contenitore1" style="display:flex;width:100%;height:100px;background-color: #ff80ab;">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3" style="align-self: center;">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
  <div class="box6">6</div>
  <div class="box7">7</div>
  <div class="box8">8</div>
</div>

19. Conclusione
Un cammino abbastanza lungo ma anche abbastanza competo per tenere dietro alle specifiche del W3C create per essere molto flessibili e fornire soluzioni per molti e diversi casi d'uso.
Come se in qualche modo velessero compensare quel lungo periodo grigio, in cui il layout era tutto e unicamente legato al float e al posizionamento relativo, fisso e assoluto.