Flexbox - Flex-Wrap

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 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;
         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 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;
         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 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;
         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: