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.

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

Sintaxis

Sintaxis formal: 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

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!

Ver también

• Usando cajas flexibles CSS