Flexbox, o modelo de caja flexible, es un sistema de layout unidimensional que facilita la distribución de elementos dentro de un contenedor. A diferencia de CSS Grid, que organiza elementos en dos dimensiones (filas y columnas), Flexbox trabaja a lo largo de un solo eje, ya sea horizontal o vertical. Flexbox es especialmente útil para la alineación y distribución de espacio entre elementos, y se utiliza ampliamente para crear diseños responsivos y adaptables.

¿Qué es Flexbox?

Flexbox es un método para distribuir elementos dentro de un contenedor de manera eficiente. El contenedor padre se comporta como un "flex container" y sus hijos como "flex items". Con Flexbox, puedes controlar el orden, alineación, y tamaño de los elementos hijos con mucha facilidad.

Referencia visual de Flexbox

Estructura Básica de Flexbox

Para utilizar Flexbox, necesitas declarar display: flex en el contenedor padre. Los elementos dentro del contenedor se alinearán en una fila de manera predeterminada.

css

Propiedades Principales de Flexbox

Flexbox ofrece varias propiedades que permiten personalizar la alineación y distribución de los elementos. A continuación, revisamos algunas de las propiedades más importantes.

flex-direction

Esta propiedad define el eje principal sobre el cual se alinearán los elementos. Por defecto, los elementos se alinean en una fila horizontal (row), pero también pueden alinearse en una columna (column).

css

justify-content

Controla cómo se distribuyen los elementos a lo largo del eje principal. Puedes centrar los elementos, distribuirlos uniformemente o alinearlos hacia el inicio o el final del contenedor.

css

align-items

Esta propiedad controla la alineación de los elementos a lo largo del eje transversal (perpendicular al eje principal). Puedes alinear los elementos al inicio, centro o final del contenedor.

css

Ejemplo de Layout Flexbox

Veamos un ejemplo sencillo de Flexbox aplicado a un diseño responsivo:

css

Este código distribuye tres elementos de manera uniforme en una fila, con espacio alrededor de cada uno. Además, cada elemento tiene la capacidad de expandirse o contraerse según el espacio disponible gracias a la propiedad flex.

Diseño Responsivo con Flexbox

Flexbox es especialmente útil en el diseño responsivo porque permite que los elementos se adapten fácilmente al tamaño del contenedor. Combinado con media queries, Flexbox puede crear layouts que se ajusten dinámicamente a pantallas de diferentes tamaños.

css

Flexbox vs CSS Grid

Aunque tanto Flexbox como CSS Grid son herramientas poderosas para crear layouts, cada uno tiene sus ventajas y casos de uso específicos. Flexbox es ideal para la alineación de elementos en una dimensión (horizontal o vertical) y para el ajuste dinámico de espacios entre elementos. Por otro lado, CSS Grid es más adecuado para la creación de layouts complejos en dos dimensiones.

Esta imagen muestra la comparación entre flexbox y css grid

Ejemplo Completo de Flexbox en Acción

A continuación, un ejemplo completo que utiliza Flexbox para un diseño que se adapta a diferentes tamaños de pantalla:

html

Conclusión

Flexbox es una herramienta poderosa y flexible para crear layouts responsivos, especialmente cuando se trata de la alineación y distribución de elementos a lo largo de un solo eje.