Flexbox a Fondo: La Guía Definitiva para Dominar la Maquetación en CSS

¿Alguna vez has luchado por centrar un elemento verticalmente? ¿O por distribuir varios elementos en una fila de manera uniforme? Durante años, estas tareas eran un dolor de cabeza en CSS. Entonces llegó Flexbox, un sistema de maquetación que lo cambió todo.

Flexbox nos ofrece una forma inteligente y, como su nombre indica, flexible de organizar, alinear y distribuir el espacio entre los elementos de un contenedor. En esta guía, no solo aprenderás sus propiedades, sino que las verás en acción con ejemplos visuales que te convertirán en un maestro de la maquetación moderna.

El Concepto Clave: Contenedores, Items y Ejes 🧭

Para entender Flexbox, solo necesitas recordar dos componentes: el contenedor flexible (el elemento padre) y los items flexibles (los elementos hijos). Al declarar un contenedor como flexible, obtienes control sobre sus hijos a través de dos ejes imaginarios: el eje principal y el eje secundario.

Propiedades del Padre: El Contenedor Flexible

Todo comienza aplicando display: flex; al contenedor. Una vez hecho esto, podemos usar propiedades para controlar a todos sus hijos.

La propiedad justify-content alinea los items a lo largo del eje principal. Es perfecta para distribuir el espacio horizontal.

Ejemplo de justify-content: space-between;

La propiedad align-items alinea los items a lo largo del eje secundario. Es la forma más fácil de centrar elementos verticalmente.

Ejemplo de align-items: center;