Flexbox - Guida rapida

Cascesa Style Sheets (CSS) è un semplice linguaggio di progettazione inteso a semplificare il processo di presentazione delle pagine web. CSS gestisce l'aspetto grafico di una pagina web.

Utilizzando CSS, è possibile controllare il colore del testo, lo stile dei caratteri, la spaziatura tra i paragrafi, il modo in cui le colonne sono dimensionate e disposte, quali immagini di sfondo o colori vengono utilizzati, design del layout, variazioni di visualizzazione per diversi dispositivi e dimensioni dello schermo così come una varietà di altri effetti.

Per determinare la posizione e le dimensioni delle scatole, in CSS, puoi utilizzare una delle modalità di layout disponibili:

  • The block layout - Questa modalità viene utilizzata per disporre i documenti.

  • The inline layout - Questa modalità viene utilizzata per disporre il testo.

  • The table layout - Questa modalità viene utilizzata per disporre le tabelle.

  • The table layout - Questa modalità viene utilizzata per posizionare gli elementi.

Tutte queste modalità vengono utilizzate per allineare elementi specifici come documenti, testo, tabelle, ecc., Tuttavia, nessuna di queste fornisce una soluzione completa per la disposizione di siti Web complessi. Inizialmente questo viene utilizzato per essere fatto utilizzando una combinazione di elementi flottati, elementi posizionati e layout di tabella (spesso). Ma i galleggianti consentono solo di posizionare orizzontalmente le scatole.

Cos'è Flexbox?

Oltre alle modalità sopra menzionate, CSS3 fornisce un'altra modalità di layout Flexible Box, comunemente chiamata Flexbox.

Utilizzando questa modalità, è possibile creare facilmente layout per applicazioni complesse e pagine Web. A differenza dei float, il layout Flexbox offre il controllo completo sulla direzione, l'allineamento, l'ordine e la dimensione delle scatole.

Caratteristiche di Flexbox

Di seguito sono riportate le caratteristiche principali del layout Flexbox:

  • Direction - È possibile disporre gli elementi su una pagina Web in qualsiasi direzione, ad esempio da sinistra a destra, da destra a sinistra, dall'alto in basso e dal basso verso l'alto.

  • Order - Utilizzando Flexbox, puoi riorganizzare l'ordine dei contenuti di una pagina web.

  • Wrap - In caso di spazio incoerente per i contenuti di una pagina web (in una sola riga), è possibile avvolgerli su più righe (sia orizzontalmente) che verticalmente.

  • Alignment - Utilizzando Flexbox, puoi allineare i contenuti della pagina web rispetto al loro contenitore.

  • Resize - Utilizzando Flexbox, puoi aumentare o diminuire le dimensioni degli elementi nella pagina per adattarli allo spazio disponibile.

Browser supportati

Di seguito sono riportati i browser che supportano Flexbox.

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1 e versioni successive
  • Android 4.4+
  • iOS 7.1+

Per utilizzare Flexbox nella tua applicazione, devi creare / definire un contenitore flessibile utilizzando il file display proprietà.

Usage -

display: flex | inline-flex

Questa proprietà accetta due valori

  • flex - Genera un contenitore flessibile a livello di blocco.

  • inline-flex - Genera una scatola contenitore flessibile in linea.

Ora vedremo come utilizzare il file display proprietà con esempi.

Flettere

Passando questo valore alla proprietà display, verrà creato un contenitore flessibile a livello di blocco. Occupa l'intera larghezza del contenitore padre (browser).

L'esempio seguente mostra come creare un contenitore flessibile a livello di blocco. Qui stiamo creando sei scatole con colori diversi e abbiamo utilizzato il contenitore flessibile per contenerle.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </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:

Dal momento che abbiamo dato il valore flex al display proprietà, il contenitore utilizza la larghezza del contenitore (browser).

Puoi osservarlo aggiungendo un bordo al contenitore come mostrato di seguito.

.container {
   display:inline-flex;
   border:3px solid black;
}

Produrrà il seguente risultato:

Flessibilità in linea

Passando questo valore al file displayproprietà, verrà creato un contenitore flessibile a livello in linea. Prende solo il posto richiesto per il contenuto.

L'esempio seguente mostra come creare un contenitore flessibile in linea. Qui stiamo creando sei scatole con colori diversi e abbiamo utilizzato il contenitore inline-flex per contenerle.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </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:

Dato che abbiamo utilizzato un contenitore flessibile in linea, ci è voluto solo lo spazio necessario per avvolgere i suoi elementi.

Il flex-direction viene utilizzata per specificare la direzione in cui devono essere posizionati gli elementi del contenitore flessibile (elementi flessibili).

usage -

flex-direction: row | row-reverse | column | column-reverse

Questa proprietà accetta quattro valori:

  • row - Dispone gli elementi del contenitore orizzontalmente da sinistra a destra.

  • row-reverse - Dispone gli elementi del contenitore orizzontalmente da destra a sinistra.

  • column - Dispone gli elementi del contenitore verticalmente da sinistra a destra.

  • column-reverse - Dispone gli elementi del contenitore verticalmente da destra a sinistra.

Ora, prenderemo alcuni esempi per dimostrare l'uso di direction proprietà.

riga

Passando questo valore al file direction proprietà, gli elementi del contenitore sono disposti orizzontalmente da sinistra a destra come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore rowalla proprietà flex-direction . Qui, stiamo creando sei scatole con colori diversi con il valore della direzione della flessionerow.

<!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:inline-flex;
         border:3px solid black;
         flex-direction:row;
      }
   </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:

riga inversa

Passando questo valore al file direction proprietà, gli elementi del contenitore sono disposti orizzontalmente da destra a sinistra come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore row-reversealla proprietà flex-direction . Qui, stiamo creando sei scatole con colori diversi con il valore della direzione della flessionerow-reverse.

<!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:inline-flex;
         border:3px solid black;
         flex-direction:row-reverse;
      }
   </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:

colonna

Passando questo valore al file direction proprietà, gli elementi del contenitore sono disposti verticalmente dall'alto verso il basso come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore columnalla proprietà flex-direction . Qui, stiamo creando sei scatole con colori diversi con il valore della direzione della flessionecolumn.

<!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:inline-flex;
         border:3px solid black;
         flex-direction:column;
      }
   </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:

colonna inversa

Passando questo valore al file direction proprietà, gli elementi del contenitore sono disposti verticalmente dal basso verso l'alto come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore column-reversealla proprietà flex-direction . Qui, stiamo creando sei scatole con colori diversi con il valore della direzione della flessionecolumn-reverse.

<!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:inline-flex;
         border:3px solid black;
         flex-direction:column-reverse;
      }
   </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:

Generalmente, in caso di spazio insufficiente per il contenitore, il resto degli articoli flessibili verrà nascosto come mostrato di seguito.

Il flex-wrap viene utilizzata per specificare i controlli se il contenitore flessibile è a riga singola o multilinea.

usage -

flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse

Questa proprietà accetta i seguenti valori:

  • wrap - In caso di spazio insufficiente per loro, gli elementi del contenitore (elementi flessibili) si avvolgeranno in linee flessibili aggiuntive dall'alto verso il basso.

  • wrap-reverse - In caso di spazio insufficiente per loro, gli elementi del contenitore (articoli flessibili) si avvolgeranno in linee flessibili aggiuntive dal basso verso l'alto.

Ora vedremo come utilizzare il file wrap proprietà, con esempi.

avvolgere

Al passaggio del valore wrap alla proprietà flex-wrap, gli elementi del contenitore sono disposti orizzontalmente da sinistra a destra come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore wrapalla proprietà flex-wrap . Qui, stiamo creando sei scatole con colori diversi con il valore della direzione della flessionerow.

<!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;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </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:

wrap-reverse

Al passaggio del valore wrap-reverse alla proprietà flex-wrap, gli elementi del contenitore sono disposti orizzontalmente da sinistra a destra come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore wrap-reversealla proprietà flex-wrap . Qui, stiamo creando sei scatole con colori diversi con il valore della direzione della flessionerow.

<!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;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap-reverse;
      }
   </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:

wrap (colonna)

Al passaggio del valore wrap alla proprietà flex-wrap e il valore column alla proprietà flex-direction, gli elementi del contenitore sono disposti orizzontalmente da sinistra a destra come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore wrap al flex-wrapproprietà. Qui, stiamo creando sei scatole con colori diversi con il valore della direzione della flessionecolumn.

<!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;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap;
         height:100vh;
      }
   </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:

wrap-reverse (colonna)

Al passaggio del valore wrap-reverse alla proprietà flex-wrap e il valore column alla proprietà flex-direction, gli elementi del contenitore sono disposti orizzontalmente da sinistra a destra come mostrato di seguito.

L'esempio seguente mostra il risultato del passaggio del valore wrap-reversealla proprietà flex-wrap . Qui stiamo creando sei scatole con colori diversi e con il valore della direzione della flessionecolumn.

<!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;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap-reverse;
         height:100vh;
      }
   </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:

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 all'estremità 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:

Il align-items 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 sono stati allineati verticalmente al centro del contenitore.

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

  • baseline - Gli elementi flessibili sono stati 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 tale 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:

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 righe 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à nella parte superiore e l'ultima riga sarà nella parte inferiore del 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:

Il flex-order viene utilizzata per definire l'ordine dell'elemento flexbox.

L'esempio seguente mostra il orderproprietà. Qui stiamo creando sei caselle colorate con le etichette uno, due, tre, quattro, cinque, sei, disposte nello stesso ordine, e le stiamo riordinando nell'ordine uno, due, cinque, sei, tre, quattro, usando il proprietà flex-order.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:1}
      .box4{background:magenta; order:2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:rows;
         flex-wrap:wrap;
      }
   </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:

- ho ordinato

È inoltre possibile assegnare valori –ve all'ordine come mostrato di seguito.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:-1}
      .box4{background:magenta; order:-2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </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:

base flessibile

Noi usiamo il flex-basis per definire la dimensione predefinita dell'elemento flessibile prima che lo spazio venga distribuito.

L'esempio seguente mostra l'utilizzo della proprietà flex-basis. Qui stiamo creando 3 scatole colorate e fissando la loro dimensione a 150 px.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:150px; }
      .box2{background:blue; flex-basis:150px;}
      .box3{background:red; flex-basis:150px;}
      
      .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>
   </body>
</html>

Produrrà il seguente risultato:

flex-grow

Noi usiamo il flex-grow proprietà per impostare il flex-growfattore. In caso di spazio in eccesso nel contenitore, specifica quanto dovrebbe crescere un particolare elemento flessibile.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-grow:10; flex-basis:100px; }
      .box2{background:blue; flex-grow:1; flex-basis:100px; }
      .box3{background:red; flex-grow:1; flex-basis:100px; }
      
      .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>
   </body>
</html>

Produrrà il seguente risultato:

flessione

Usiamo la proprietà flex-shrink per impostare il flex shrink-factor. Nel caso in cui non ci sia abbastanza spazio nel contenitore, specifica quanto deve restringersi un elemento flessibile.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:200px; flex-shrink:10}
      .box2{background:blue; flex-basis:200px; flex-shrink:1}
      .box3{background:red; flex-basis:200px; flex-shrink:1}
      
      .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>
   </body>
</html>

Produrrà il seguente risultato:

flettere

C'è una scorciatoia per impostare i valori a tutte queste tre proprietà contemporaneamente; è chiamatoflex. Utilizzando questa proprietà, è possibile impostare i valori su flex-grow, flex-shrink e valori di base flessibile contemporaneamente. Ecco la sintassi di questa proprietà.

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Questa proprietà è simile a align-items, ma qui viene applicato a singoli elementi flessibili.

Usage -

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Questa proprietà accetta i seguenti valori:

  • flex-start - L'elemento flessibile verrà allineato verticalmente nella parte superiore del contenitore.

  • flex-end - L'elemento flessibile sarà allineato verticalmente nella parte inferiore del contenitore.

  • flex-center - L'articolo flessibile sarà allineato verticalmente al centro del contenitore.

  • Stretch - L'elemento flessibile sarà allineato verticalmente in modo tale da riempire l'intero spazio verticale del contenitore.

  • baseline - L'elemento flessibile verrà allineato alla linea di base dell'asse trasversale.

inizio flessibile

Passando questo valore alla proprietà align-self, un particolare elemento flessibile verrà allineato verticalmente nella parte superiore del contenitore.

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

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:start;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         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-self, un particolare elemento flessibile sarà allineato verticalmente nella parte inferiore del contenitore.

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

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:flex-end;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         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:

centro

Al passaggio del valore center alla proprietà align-self, un particolare articolo flessibile sarà allineato verticalmente al centro del contenitore.

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

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:center;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         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:

allungare

Passando questo valore alla proprietà align-self, un particolare articolo flessibile sarà allineato verticalmente in modo tale da riempire l'intero spazio verticale del contenitore.

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

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:stretch;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         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: