Layout - Flexbox (Flex)

¿Qué es Flexbox?

Flexbox es una forma más eficiente de crear diseños, alinear y distribuir espacios entre ítems en un contenedor, incluso cuando las dimensiones de esos ítems son desconocidas y/o dinámicas (en virtud de eso el término “flex”).

Hasta ahora conocemos algunas formas de organizar nuestro contenido a través de diferentes displays: bloque, inline, inline-block, tablas, combinado con flotaciones o posiciones. El módulo CSS de caja flexible (flexbox) es un modelo avanzado de layout que permite manejar con mayor facilidad la ubicación, alineación, tamaños y relación de los elementos dentro de un contenedor.

Características

Trabaja por medio de contenedores e hijos, los cuales se pueden disponer de manera:

Vertical u horizontal
De izquierda a derecha
De arriba a abajo
O viceversa

Al trabajar con flexbox, vamos a diferenciar contenedor de hijos, cada uno con sus propiedades y características para poder lograr el diseño deseado.

Elementos

Flex es un módulo completo y no una propiedad única. Algunas propiedades deben declararse en el contenedor (flex container), mientras que otros deben declararse en los elementos secundarios (flex ítems).

Distribución - Ejes

Eje Principal (Main Axis)

El eje principal de un flex container es el eje primario y a lo largo de él son insertados los flex ítems.

El eje principal no es necesariamente horizontal; Dependerá de la propiedad flex-direction.
Los flex ítems se insertan empezando por el lado start, dirigiéndose hacia el lado end.
El tamaño principal es el ancho o alto de un flex ítem, dependiendo de la dirección del contenedor.

Eje Transversal (Cross Axis)

El eje perpendicular al eje principal se llama eje transversal. Su dirección depende de la dirección del eje principal.

Las líneas flex se llenan con ítems y se agregan al contenedor, comenzando desde el lado cross start hacia el lado cross end.
El cross size es el ancho o alto de un flex ítem en la dimensión transversal.

Flex Container

Es el elemento que involucra su estructura. Se define con la propiedad display: flex o display: inline-flex.

Flex Ítem

Son elementos secundarios del flex container.

Propiedades del Flex Container

display: flex

display: flex;

Esta propiedad define un flex container. Coloca todos los elementos secundarios directos en un contexto Flex.

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

Establece el eje principal, definiendo así la dirección en la que los flex ítems están alineados en el flex container.

row (estándar) - de la izquierda a la derecha
row-reverse - de la derecha a la izquierda
column - mismo que row, pero de arriba a abajo
column-reverse - mismo que row-reverse pero de abajo hacia arriba

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

Por estándar, los flex ítems todos intentarán encajarse en una sola línea. Con esta propiedad puedes modificar este comportamiento.

nowrap (estándar) - todos los flex ítems estarán en una sola línea
wrap - los flex ítems se dividirán en múltiples líneas, de arriba a abajo

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Define la alineación de los ítems a lo largo del eje principal. Ayuda a distribuir el espacio libre que queda en el contenedor.

flex-start (estándar) - los ítems se alinean a lo largo del borde de inicio
flex-end - los ítems se alinean a lo largo del borde final
center - los ítems están centrados en la línea
space-between - los ítems se distribuyen uniformemente; el primero al lado del borde inicial, el último al lado del borde final
space-around - los ítems se distribuyen uniformemente con espacio alrededor
space-evenly - distribuye el espacio uniformemente entre los ítems