Maquetación Parte 5 flex

Flex es un sistema de elementos flexibles, en la que los elementos html se colocan y adaptan de forma automática.

Los contenedores flexibles tienen dos ejes un eje horizontal o eje principal y un eje secundario o eje vertical.

Los elementos flexibles se colocarán dentro de un contenedor que es el elemento padre y a el establecemos las propiedades que se aplicaran a los elementos.

Los contenedores flexibles tienen una orientación por defecto en el eje horizontal o eje principal (en fila) y una orientación secundaria perpendicular a la principal que será vertical (y viceversa).

Veamos un ejemplo.

La vista será así.

Aquí empieza la magia de “flex”, con la propiedad justify-content me reparte el espacio de la pantalla entre los tres elementos.

Y si modifico el tamaño de la pantalla me lo ajusta automáticamente.

Otro ejemplo:

Si borro justify-content: space-arroud;

Si hago la pantalla mas pequeña se me ajusta, pero me pone otra línea de texto.

Ponemos la propiedad flex-wrap: wrap;

Y me añade otra fila para acomodar la caja 6.

Esto nos da una idea de la flexibilidad de la maquetación web con esto ya estamos entrando dentro de la programación web responsive (el contenido se adapta al tamaño del dispositivo).