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.

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet,
Elem. 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 

- wrap, 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.

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 elmento 2 y debajo el elemento 3.

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet,
Elem. 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

- 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.

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet,
Elem. 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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 aquivalente a escribir flex-direction:row; flex-wrap: nowrap;


Enero-2019 (V 2.02)
Pág. 13.18
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.