flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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: flex-wrap = 
  nowrap        |
  wrap          |
  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

Specification
CSS Flexible Box Layout Module Level 1 # flex-wrap-property

Compatibilidad con navegadores

Ver también

Usando cajas flexibles CSS