Flexbox - Allinea elementi

Il align-items la proprietà è uguale a justify content. Ma qui, gli elementi erano allineati attraverso l'accesso incrociato (verticalmente).

Usage -

align-items: flex-start | flex-end | center | baseline | stretch;

Questa proprietà accetta i seguenti valori:

  • flex-start - Gli elementi flessibili sono stati allineati verticalmente nella parte superiore del contenitore.

  • flex-end - Gli elementi flessibili sono stati allineati verticalmente nella parte inferiore del contenitore.

  • flex-center - Gli articoli flessibili erano allineati verticalmente al centro del contenitore.

  • stretch - Gli elementi flessibili sono stati allineati verticalmente in modo tale da riempire l'intero spazio verticale del contenitore.

  • baseline - Gli elementi flessibili erano allineati in modo tale che la linea di base del loro testo fosse allineata lungo una linea orizzontale.

inizio flessibile

Passando questo valore alla proprietà align-items, gli elementi flessibili sono stati allineati verticalmente nella parte superiore del contenitore.

L'esempio seguente mostra il risultato del passaggio del valore flex-start al align-items 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;
         height:100vh;
         align-items: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-items, gli elementi flessibili sono allineati verticalmente nella parte inferiore del contenitore.

L'esempio seguente mostra il risultato del passaggio del valore flex-end al align-items 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;
         height:100vh;
         align-items: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à align-items, gli articoli flessibili sono allineati verticalmente al centro del contenitore.

L'esempio seguente mostra il risultato del passaggio del valore flex-center al align-items 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;
         height:100vh;
         align-items: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:

allungare

Passando questo valore alla proprietà align-items, gli elementi flessibili sono allineati verticalmente in modo da riempire l'intero spazio verticale del contenitore.

L'esempio seguente mostra il risultato del passaggio del valore stretch al align-items 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;
         height:100vh;
         align-items: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:

linea di base

Passando questo valore alla proprietà align-items, gli elementi flessibili sono allineati in modo tale che la linea di base del loro testo sia allineata lungo una linea orizzontale.

L'esempio seguente mostra il risultato del passaggio del valore baseline al align-items 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;
         height:100vh;
         align-items:baseline;
      }
   </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: