Características flex-wrap en CSS

La propiedad flex-wrap en CSS determina si los elementos flexibles deben estar contenidos en una sola línea o pueden envolverse en varias líneas. Si se permite el envoltorio, podemos usar esta propiedad para especificar el orden de apilamiento de las líneas.

Funciones flex-wrap css

Valor inicial	`nowrap`
Aplicado a	Contenedores flexibles.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/* flex-wrap */ 
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Variables Globales */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

Ejemplos y aplicaciones en código

Este ejemplo demuestra el uso de la wrap, nowrap y wrap-reverse con flex-wrap atributo, palabras clave para mostrar cómo los elementos serán envolver después de que exceden la anchura del contenedor.

< p > < code > flex-wrap: wrap </ code > : </ p > 
< div  class = "content" > 
  < div  class = "red" > 1 </ div > 
  < div  class = "green" > 2 </ div > 
  < div  class = "blue" > 3 </ div > 
</ div >
< p > <code > flex-wrap: nowrap </ code > : </ p > 
< div  class = "content1" > 
  < div  class = "red" > 1 </ div > 
  < div  class = "green" > 2 </ div > 
  < div  class = "blue" > 3 </ div > 
</ div > 
< p > <code >flex-wrap: wrap-reverse </ code > : </ p > 
< div  class = "content2" > 
  < div  class = "red" > 1 </ div > 
  < div  class = "green" > 2 </ div > 
  < div  class = "blue" > 3 </ div > 
</ div >

Código CSS:

.content,
.content1,
.content2 {
    color: #fff;
    font: 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}
.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
}
.red {
    background-color: salmon;
}
.green {
    background-color: lightseagreen;
}
.blue {
    background: steelblue;
}
.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	29.0	20.0	11	12.5	9.0

Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-o -ms-).

Características generales

La propiedad acepta flex-wrap una de las siguientes palabras reservadas.

nowrap

Los elementos flex se colocarán en una sola línea, lo que puede hacer que el contenido se salga de su contenedor si no cabe en él.

wrap

Los elementos flexibles se colocarán en varias líneas si es necesario, y la dirección de la envoltura será de arriba a abajo.

wrap-reverse

Como en la palabra reservada wrap, pero el sentido del giro está invertido.

Estructura flex-wrap css

flex-wrap: nowrap | wrap | wrap-reverse;

Consulte también

P página de sub-propiedades que esta conjuntos de propiedades son: flex-basis, flex-direction, flex-flow, flex-grow y flex-shrink.
La página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.