Flexbox - Allinea contenuto

Nel caso in cui il contenitore flessibile abbia più righe (quando, flex-wrap: wrap), la proprietà align-content definisce l'allineamento di ogni riga all'interno del contenitore.

Usage -

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Questa proprietà accetta i seguenti valori:

  • stretch - Le linee nel contenuto si allungheranno per riempire lo spazio rimanente.

  • flex-start - Tutte le righe del contenuto vengono impacchettate all'inizio del contenitore.

  • flex-end - Tutte le righe nel contenuto sono imballate alla fine del contenitore.

  • center - Tutte le righe nel contenuto sono imballate al centro del contenitore.

  • space-between - Lo spazio extra viene distribuito tra le linee in modo uniforme.

  • space-around - Lo spazio extra viene distribuito tra le righe in modo uniforme con lo stesso spazio attorno a ciascuna riga (comprese la prima e l'ultima riga)

centro

Passando questo valore alla proprietà align-content, tutte le linee sono imballate al centro del container.

L'esempio seguente mostra il risultato del passaggio del valore center al align-content proprietà.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:43%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Produrrà il seguente risultato:

inizio flessibile

Passando questo valore alla proprietà align-content, tutte le linee vengono imballate all'inizio del container.

L'esempio seguente mostra il risultato del passaggio del valore flex-start al align-content proprietà.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Produrrà il seguente risultato:

estremità flessibile

Passando questo valore alla proprietà align-content, tutte le linee vengono imballate alla fine del container.

L'esempio seguente mostra il risultato del passaggio del valore flex-end al align-content proprietà.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Produrrà il seguente risultato:

allungare

Passando questo valore alla proprietà align-content, le linee si allungheranno per riempire lo spazio rimanente.

L'esempio seguente mostra il risultato del passaggio del valore stretch al align-content proprietà.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Produrrà il seguente risultato:

spazio intorno

Passando questo valore alla proprietà align-content, lo spazio extra viene distribuito tra le righe in modo uniforme con lo stesso spazio attorno a ciascuna riga (comprese la prima e l'ultima riga).

L'esempio seguente mostra il risultato del passaggio del valore space-around al align-content proprietà.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Produrrà il seguente risultato:

spazio tra

Passando questo valore alla proprietà align-content, lo spazio extra viene distribuito tra le righe in modo uniforme, dove la prima riga sarà in alto e l'ultima riga sarà in fondo al contenitore.

L'esempio seguente mostra il risultato del passaggio del valore space-between al align-content proprietà.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Produrrà il seguente risultato: