Por otro lado, existe otra propiedad llamada flex-wrap con la cual podemos especificar el comportamiento del contenedor respecto a evitar que se desborde (nowrap, valor por defecto) o permitir que lo haga, en cuyo caso, estaríamos hablando de un contenedor flexbox multilinea.
| Propiedad | Valor | Significado |
|---|---|---|
flex-wrap |
nowrap | wrap | wrap-reverse | Evita o permite el desbordamiento (multilinea). |
En la siguiente tabla veamos el significado de cada valor.
| Valor | Descripción |
|---|---|
| nowrap | Establece los ítems en una sola línea (no permite que se desborde el contenedor). |
| wrap | Establece los ítems en modo multilinea (permite que se desborde el contenedor). |
| wrap-reverse | Establece los ítems en modo multilinea, pero en dirección inversa. |
Veamos un ejm para entender mejor todos los conceptos.
Ejm
.container {
display: flex;
flex-wrap: wrap; /* Comportamiento por defecto: nowrap */
background: steelblue;
width: 200px;
}
.item {
background: grey;
width: 50%;
}
En el caso de especificar nowrap (u omitir la propiedadflex-wrap) en el contenedor, los 3 ítems se mostrarían en una misma línea del contenedor. En ese caso, cada ítem debería tener un 50% de ancho (es decir, 100px de los 200px del contenedor). Un tamaño de 100px por ítem, sumaría un total de 300px, los cuales no cabrían en el contenedor de 200px, por lo que flexbox reajusta los ítems flexibles para que quepan todos en la misma línea, manteniendo las mismas proporciones.
Sin embargo, si especificamos wrap en la propiedad flex-wrap, lo que hacemos es que el contenedor se pueda desbordar, pasando a ser un contenedor multilinea, que mostraría el ítem 1 y 2 en la primera linea (con un tamaño de 100px cada uno) y el ítem 3 en la línea siguiente, dejando un espacio libre para un posible ítem 4.