Flexbox - Envoltura flexible

Generalmente, en caso de espacio insuficiente para el contenedor, el resto de los elementos flexibles se ocultarán como se muestra a continuación.

los flex-wrap La propiedad se utiliza para especificar los controles si el contenedor flexible es de una sola línea o de varias líneas.

usage -

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

Esta propiedad acepta los siguientes valores:

wrap - En caso de que no haya suficiente espacio para ellos, los elementos del contenedor (flexitems) se envolverán en líneas flexibles adicionales de arriba a abajo.
wrap-reverse - En caso de que no haya suficiente espacio para ellos, los elementos del contenedor (elementos flexibles) se envolverán en líneas flexibles adicionales de abajo hacia arriba.

Ahora veremos cómo utilizar el wrap propiedad, con ejemplos.

envolver

Al pasar el valor wrap a la propiedad flex-wrap, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrapa la propiedad flex-wrap . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblerow.

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

Producirá el siguiente resultado:

envolver-reverso

Al pasar el valor wrap-reverse a la propiedad flex-wrap, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrap-reversea la propiedad flex-wrap . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblerow.

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

Producirá el siguiente resultado:

envolver (columna)

Al pasar el valor wrap a la propiedad flex-wrap y el valor column a la propiedad flex-direction, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrap al flex-wrappropiedad. Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblecolumn.

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

Producirá el siguiente resultado:

wrap-reverse (columna)

Al pasar el valor wrap-reverse a la propiedad flex-wrap y el valor column a la propiedad flex-direction, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrap-reversea la propiedad flex-wrap . Aquí, estamos creando seis cajas con diferentes colores y con el valor de dirección flexiblecolumn.

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

Producirá el siguiente resultado:

↰ Previous page Next page ↱