Flexbox, abreviatura de Flexible Box Layout, es un módulo de CSS diseñado para simplificar la alineación, distribución y organización de elementos dentro de un contenedor.

Flexbox utiliza una relación padre-hijo. El padre se denomina contenedor flex, que controla el diseño. Los hijos se llaman elementos flex, cuyo tamaño, posición y orden pueden controlarse mediante propiedades de flexbox.

Nota

Flexbox se comporta de manera diferente a los elementos de bloque e inline. A diferencia de los elementos de bloque, los elementos flex no se apilan verticalmente; por defecto, se alinean en una fila o columna. Además, los márgenes en los bordes del contenedor no se extienden más allá de sus límites.

Flexbox en acción

Flexbox funciona alineando elementos a lo largo de los ejes del contenedor flex. Para habilitar Flexbox, simplemente aplica la propiedad display: flex; al elemento padre. A partir de ahí, puedes personalizar cómo se alinean y distribuyen los elementos dentro del contenedor.