Layout con Flexbox — CSS: dar estilo

Flexbox

¿Cansado de pelear para centrar cosas? Flexbox es la forma moderna de alinear y distribuir elementos sin sufrir. Se activa poniendo display: flex en el contenedor (no en los hijos); a partir de ahí, sus hijos se colocan en fila.

.contenedor {
  display: flex;
  justify-content: center;  /* alineación horizontal */
  align-items: center;      /* alineación vertical */
  gap: 12px;                /* separación entre hijos */
}

justify-content: distribuye en el eje principal (center, space-between, flex-start...).
align-items: alinea en el eje cruzado (center, stretch...).
flex-direction: column cambia la fila por una columna.

Con estas pocas propiedades resuelves la mayoría de los layouts. En serio: dominar flexbox es el día en que dejas de pelearte con CSS.