Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 87

Un contenedor flexible puede tener una o más líneas de cajas. La propiedad flex-wrap declara esta condición mediante tres valores posibles: nowrap, wrap y wrap-reverse. El valor nowrap establece un contenedor flexible de una sola línea, wrap declara un contenedor de varias líneas y ordena a las líneas desde el inicio del eje transversal hasta el final de éste, generalmente de izquierda a derecha o de arriba a abajo. El último valor disponible, llamado wrap-reverse, invierte este orden.

Código 2-54

La creación de dos líneas de cajas con la propiedad flex-wrap.

En el Código 2-54 las tres primeras cajas tienen un tamaño de 100 px y caben en una sola línea de 600 px de ancho del contenedor, pero la última caja ha sido declarada flexible con un tamaño inicial de 400 px (flex-basis). Como no hay espacio suficiente en el contenedor para mostrar todas las cajas, hay dos opciones: reducir el tamaño del cuadro flexible para que se adapte al espacio disponible o generar una nueva línea. Como en este caso hemos asignado el valor wrap para la propiedad flex-wrap, el navegador aplica la segunda opción:

Figura 2-22

Contenedor flexible multilínea.

El elemento caja4 fue declarado lo más flexible por su propiedad flex, por lo que no solo se coloca en una segunda línea, pero también se expandió para ocupar el espacio total disponible en la línea (recuerde que los 400 px declarados por el parámetro flex-basis son solo el valor inicial, no una declaración de tamaño). Además, las cajas en la primera línea, están alineadas con el centro debido al nuevo espacio disponible en la primera línea y el valor de la propiedad justify-content.

El orden de las líneas puede ser invertido con el valor wrap-reverse, como se muestra en la siguiente figura.

Figura 2-23

Usar flex-wrap: wrap-reverse para crear una nueva línea.