Flexbox - Flex-Direction

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 flessibilerow.

<!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 flessibilerow-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 flessibilecolumn.

<!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 flessibilecolumn-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: