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.
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
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
BCD tables only load in the browser