Atributo flex-wrap de CSS

Definición y uso

El atributo flex-wrap especifica si los elementos flexibles deben rebanarse.

Notas:Si el elemento no es un elemento flexible, el atributo flex es inválido.

Véase también:

Tutoriales de CSS: Cuadro flexible de CSS

Manual de referencia de CSS:Atributo flex

Manual de referencia de CSS:Atributo flex-basis

Manual de referencia de CSS:Atributo flex-direction

Manual de referencia de CSS:Atributo flex-flow

Manual de referencia de CSS:Atributo flex-grow

Manual de referencia de CSS:Atributo flex-shrink

Manual de referencia de HTML DOM:Atributo flexWrap

Ejemplo

Hacer que los elementos flexibles se rebanen cuando sea necesario:

div {
  display: flex;   
  flex-wrap: wrap;
}

Prueba personalmente

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
nowrap Valor predeterminado. Establece que los elementos flexibles no se rebanen.
wrap Establece que los elementos flexibles se rebanen cuando sea necesario.
wrap-reverse Establece que los elementos flexibles se rebanen cuando sea necesario en la dirección inversa.
initial Establece este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo del elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: nowrap
Herencia: No
Producción de animación: No se admite. Véase:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.flexWrap="nowrap"

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente la propiedad.

Los números con -webkit- o -moz- indican la primera versión con prefijo utilizada.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0