Flexbox - Contenuti giustificati

Spesso è possibile osservare uno spazio extra lasciato nel contenitore dopo aver sistemato gli elementi flessibili come mostrato di seguito.

Utilizzando la proprietà justify-content, puoi allineare i contenuti lungo l'asse principale distribuendo lo spazio extra come previsto. Puoi anche regolare l'allineamento degli elementi flessibili, nel caso in cui superino la linea.

usage -

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

Questa proprietà accetta i seguenti valori:

  • flex-start - Gli articoli flessibili vengono posizionati all'inizio del contenitore.

  • flex-end - Gli articoli flessibili sono posti alla fine del contenitore.

  • center - Gli articoli flessibili sono posizionati al centro del contenitore, dove lo spazio extra è equamente distribuito all'inizio e alla fine degli articoli flessibili.

  • space-between - Lo spazio extra è equamente distribuito tra gli elementi flessibili.

  • space-around - Lo spazio extra è equamente distribuito tra gli elementi flessibili in modo tale che lo spazio tra i bordi del contenitore e il suo contenuto sia la metà dello spazio tra gli elementi flessibili.

Ora vedremo come utilizzare la proprietà justify-content, con esempi.

inizio flessibile

Passando questo valore alla proprietà justify-content, gli articoli flessibili vengono posizionati all'inizio del contenitore.

L'esempio seguente mostra il risultato del passaggio del valore flex-start al justify-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:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-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à justify-content, gli articoli flessibili sono posti all'estremità del contenitore.

L'esempio seguente mostra il risultato del passaggio del valore flex-end al justify-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:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-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:

centro

Passando questo valore alla proprietà justify-content, gli articoli flessibili sono posti al centro del contenitore, dove lo spazio extra è equamente distribuito all'inizio e alla fine degli articoli flessibili.

L'esempio seguente mostra il risultato del passaggio del valore center al justify-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:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-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:

spazio tra

Passando questo valore alla proprietà justify-content, lo spazio extra è equamente distribuito tra gli elementi flessibili in modo tale che lo spazio tra due elementi flessibili qualsiasi sia lo stesso e l'inizio e la fine degli elementi flessibili tocchino i bordi del contenitore.

L'esempio seguente mostra il risultato del passaggio del valore space-between al justify-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:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-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:

spazio intorno

Passando questo valore alla proprietà justify-content, lo spazio extra è equamente distribuito tra gli elementi flessibili in modo che lo spazio tra due elementi flessibili sia lo stesso. Tuttavia, lo spazio tra i bordi del contenitore e il suo contenuto (l'inizio e la fine degli elementi flessibili) è la metà dello spazio tra gli elementi flessibili.

L'esempio seguente mostra il risultato del passaggio del valore space-around al justify-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:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-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:

in modo uniforme

Passando questo valore alla proprietà justify-content, lo spazio extra è equamente distribuito tra gli elementi flessibili in modo che lo spazio tra due elementi flessibili qualsiasi sia lo stesso (compreso lo spazio fino ai bordi).

L'esempio seguente mostra il risultato del passaggio del valore space-evenly al justify-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:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </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: