Unidad 13. Posicionamiento. Flexbox. Grid (XVIII)

13.13. Flexbox. Flex-wrap

La propiedad flex-wrap establece si se permite que los elementos se coloquen en una nueva fila o deben permanecer en una sola fila. La dirección secundaria determina cual es la siguiente fila, lo habitual (para flex-direction: row) es que sea en vertical de arriba a abajo, pero ya vimos que pueden ser otras direcciones según el valor de flex-direction. Los valores son tres: nowrap, wrap y wrap-reverse.

- nowrap, indica que los elementos deben permanecer en una sola fila, no pueden pasar a la siguiente fila. Cuando falta espacio se harán más estrechos, pueden aparecer las barras de desplazamiento, o puede llegar a desbordar el contenedor.

Por ejemplo, con este código flex-direction: row; flex-wrap: nowrap; los elementos se van estrechando y aumentando su tamaño en la dirección secundaria (altura, en este caso), pero los elementos no pasan a la fila siguiente.

 

- wrap, indica que los elementos pueden pasar a la fila siguiente cuando no hay suficiente espacio para mostrar el contenido en la dirección principal, el elemento flexible pasa a la siguiente fila en la dirección secundaria.

Por ejemplo, con este código flex-direction: row; flex-wrap: wrap; vemos que si no cabe el texto en la dirección horizontal, todo el elemento pasa a la fila siguiente en la dirección vertical. Es decir si el texto no cabe en una línea a lo largo de la horizontal, en lugar de ocupar dos líneas en la horizontal, todo el elemento pasa a la siguiente fila. En este ejemplo, al ir reduciendo el ancho de la ventana del navegador, primero el elemento 3 pasará a la fila siguiente, y luego el elemento 2 también pasará a la fila siguiente; al final quedarán tres filas con el elemento 1, debajo el elemento 2 y debajo el elemento 3.

- wrap-reverse, indica que los elementos pueden pasar a la fila siguiente cuando no hay suficiente espacio para mostar el contenido en la dirección principal, el elemento flexible pasa a la siguiente fila en la dirección secundaria, pero en dirección invertida, es decir en lugar de inicio a fin (de abajo a arriba, para flex-direction: row), lo harán de fin a inicio (de arriba a abajo, para flex-direction: row)

Por ejemplo, con este código flex-direction: row; flex-wrap: wrap-reverse; vemos que si no cabe el texto en la dirección horizontal, todo el elemento pasa a la fila siguiente en la dirección vertical inversa. Es decir si el texto no cabe en una línea a lo largo de la horizontal, en lugar de ocupar dos líneas en la horizontal, todo el elemento pasa a la anterior fila. En este ejemplo, al ir reduciendo el ancho de la ventana del navegador, primero el elemento 3 pasará a la fila anterior, y luego el elemento 2 también pasará a la fila anterior; al final quedarán tres filas con el elemento 3, debajo el elmento 2 y debajo el elemento 1.

Forma compacta flex-flow

La propiedad compacta flex-flow es una forma abreviada de establecer simultáneamente las propiedades flex-direction y flex-wrap. Se indican dos valores separados por blancos, uno para cada propiedad. Por ejemplo: flex-flow: row nowrap; es equivalente a escribir flex-direction:row; flex-wrap: nowrap;