flex-wrap

Resumen

La propiedad flex-wrap de CSS especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.

Valor inicial	`nowrap`
Applies to	flex containers
Heredable	no
Valor calculado	como se especifica
Animation type	discrete

Ver Usando cajas flexibles CSS para conocer más propiedades e información.

Sintaxis

Sintaxis formal: nowrap | (en-US) wrap | (en-US) wrap-reverse

flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse

flex-wrap: inherit

Valores

Se aceptan los siguientes valores:

nowrap: Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor cross-start es equivalente a start o before según el valor de flex-direction.
wrap: Los elementos flex son colocados en varias líneas. El valor cross-start equivale a start o before dependiendo del valor flex-direction y cross-end implicaría lo opuesto a lo especificado por cross-start.
wrap-reverse: Actúa como wrap pero cross-start y cross-end están intercambiados.

Ejemplos

element {
  flex-wrap: nowrap;
}

Especificaciones

Especificacion	Estado	Comentario
CSS Flexible Box Layout Module La definición de 'flex-wrap' en esta especificación.	Candidate Recommendation

Compatibilidad

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Escritorio
Móvil

Característica	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Soporte básico	28.0 error 939901	21.0-webkit (en-US)	11.0	12.10	6.1-webkit (en-US)

Característica	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Soporte básico	28.0 error 939901	4.4	11.0	12.10	7.0-webkit (en-US)

Ver también

Usando cajas flexibles CSS