Propiedad CSS flex-wrap
La propiedad CSS flex-wrap define si los elementos deben ajustarse o no. Consulta ejemplos con diferentes valores.
La propiedad flex-wrap controla si los elementos de un contenedor flex se fuerzan en una sola línea o pueden dividirse en varias. Por defecto, un contenedor flex intenta encajar todos sus elementos en una línea, aunque eso implique reducirlos o dejarlos desbordarse. Establecer flex-wrap: wrap indica a los elementos que pueden fluir hacia nuevas líneas cuando no hay espacio suficiente.
Esta es la propiedad que se utiliza cuando una fila de tarjetas, etiquetas o enlaces de navegación debe reorganizarse correctamente en pantallas estrechas en lugar de desbordarse o comprimirse.
flex-wrap solo afecta a los elementos que son ítems flex, por lo que no tiene efecto a menos que el padre tenga display: flex (o display: inline-flex). Si un contenedor flex no tiene elementos, la propiedad no hace nada.
La propiedad flex-wrap es una de las propiedades CSS3, y se combina estrechamente con flex-direction: juntas se escriben habitualmente como la abreviatura flex-flow.
Este capítulo explica cada valor de flex-wrap, cómo el ajuste interactúa con el eje principal y los aspectos a tener en cuenta.
| Valor inicial | nowrap |
|---|---|
| Se aplica a | Contenedores flex. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.flexWrap = "wrap-reverse"; |
Cómo funciona el ajuste
El ajuste ocurre a lo largo del eje transversal, perpendicular al eje principal definido por flex-direction:
- Con el valor predeterminado
flex-direction: row, los elementos se disponen de izquierda a derecha. Cuandoflex-wrap: wrapestá activo y los elementos se quedan sin espacio horizontal, el siguiente elemento comienza en una nueva fila debajo. - Con
flex-direction: column, los elementos se apilan de arriba a abajo, y el ajuste empuja los elementos desbordados hacia una nueva columna al lado de la primera.
Una consecuencia clave: cuando flex-wrap es nowrap (el valor predeterminado), los ítems flex se reducen para caber en el contenedor (entra en juego su flex-shrink) o se desbordan. Solo cuando se permite el ajuste los elementos mantienen su tamaño preferido y se mueven a una nueva línea.
Cuando los elementos se ajustan en varias líneas, el espacio entre esas líneas se controla con align-content, mientras que la alineación de los elementos dentro de una sola línea se controla con align-items. En una sola línea sin ajuste, align-content no tiene efecto.
Sintaxis
Sintaxis de la propiedad CSS flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;Ejemplo de la propiedad flex-wrap con el valor "wrap":
El contenedor de abajo tiene 200px de ancho y contiene seis cajas de 50px de ancho (300px de contenido). Con flex-wrap: wrap, las cajas que no caben en la primera fila pasan a una segunda fila en lugar de reducirse:
Ejemplo de la propiedad CSS flex-wrap con el valor wrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid #cccccc;
display: flex;
flex-wrap: wrap;
}
.wrap div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>The flex-wrap Property</h2>
<div class="wrap">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>Ejemplo de la propiedad flex-wrap con el valor "nowrap":
Con el valor predeterminado nowrap, las mismas seis cajas se fuerzan en una sola fila. Como no caben todas, se comprimen hasta ser más estrechas que su ancho declarado de 50px:
Ejemplo de la propiedad CSS flex-wrap con el valor nowrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad flex-wrap con el valor "wrap-reverse":
wrap-reverse también permite que los elementos fluyan en varias líneas, pero invierte la dirección del eje transversal: las líneas se apilan hacia arriba en lugar de hacia abajo, de modo que la primera fila aparece en la parte inferior:
Ejemplo de la propiedad CSS flex-wrap con el valor wrap-reverse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| nowrap | Define que los elementos flexibles no se ajustarán. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| wrap | Define que los elementos flexibles se ajustarán cuando sea necesario. | Pruébalo » |
| wrap-reverse | Define que los elementos flexibles se ajustarán en orden inverso cuando sea necesario. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Abreviatura flex-flow
Dado que flex-wrap casi siempre se establece junto con flex-direction, CSS proporciona la abreviatura flex-flow para ambas a la vez:
/* flex-direction flex-wrap */
flex-flow: row wrap;Esto es equivalente a escribir flex-direction: row; y flex-wrap: wrap; por separado.
Propiedades relacionadas
display— establecedisplay: flexen el padre para crear el contenedor flex sobre el que actúaflex-wrap.flex-direction— define el eje principal (fila o columna) alrededor del cual el ajuste reorganiza los elementos.align-content— distribuye el espacio entre las líneas ajustadas (solo importa cuando los elementos se ajustan).justify-content— alinea los elementos a lo largo del eje principal.flex— controla cómo los elementos individuales crecen y se reducen para llenar cada línea.