La flex-wrappropiedad es una subpropiedad del módulo Diseño de caja flexible.
Define si los elementos flexibles se fuerzan en una sola línea o pueden fluir en varias líneas. Si se establece en varias líneas, también define el eje transversal que determina la dirección en la que se apilan las nuevas líneas.
Recordatorio: el eje transversal es el eje perpendicular al eje principal. Su dirección depende de la dirección del eje principal.
La flex-wrappropiedad acepta 3 valores diferentes:
nowrap( predeterminado ): línea única que puede hacer que el contenedor se desbordewrap: multilíneas, la dirección está definida porflex-directionwrap-reverse: multilíneas, opuesto a la dirección definida porflex-direction
Sintaxis
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Manifestación
En la siguiente demostración:
- La lista roja está configurada para
nowrap - La lista amarilla se establece en
wrap - La lista azul está configurada para
wrap-reverse
Nota: el flex-directionse establece en el valor por defecto: row.
Vea Pen Flex-wrap: demostración de CSS-Tricks (@ css-tricks) en CodePen.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Para obtener más información sobre cómo mezclar sintaxis para obtener la mejor compatibilidad con el navegador, consulte este artículo (Trucos CSS) o este artículo (DevOpera).