Flexbox
El sistema para alinear y distribuir elementos en una dimensión.
Flexbox se activa con display: flex en el contenedor. Por defecto, los hijos se alinean en fila. justify-content controla la alineación en el eje principal (horizontal por defecto) y align-items en el eje transversal (vertical por defecto).
flex-direction: column cambia el eje principal a vertical. gap añade espacio uniforme entre los hijos sin necesidad de márgenes manuales. flex-wrap: wrap permite que los elementos salten de línea si no caben.
Es el sistema ideal para barras de navegación, tarjetas en fila, centrar contenido vertical y horizontalmente (justify-content: center; align-items: center;) y distribuir espacio entre pocos elementos.
Ejemplo — pruébalo tú mismo
Ponlo a prueba: Crea 3 tarjetas dentro de un contenedor flex y céntralas horizontal y verticalmente.