flex-wrap
Baseline
Ampliamente disponible
*
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde septiembre de 2015.
* Algunas partes de esta característica pueden tener distintos niveles de compatibilidad.
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 ] || balance
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-directiony cross-end implicaría lo opuesto a lo especificado por cross-start. wrap-reverse-
Actúa como
wrappero cross-start y cross-end están intercambiados.
Ejemplos
element {
flex-wrap: nowrap;
}
Especificaciones
| Especificación |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |