2.4 Flexbox

Flexbox coloca los elementos en una dimensión (fila o columna) y reparte el espacio entre ellos. Es ideal para barras de navegación, tarjetas en fila y centrar contenido.

Se activa en el contenedor (el padre); sus hijos directos pasan a ser elementos flexibles.

Propiedades del contenedor

Propiedad	Valores habituales	Efecto
display	flex	Activa flexbox
flex-direction	row (por defecto), column	Eje principal
justify-content	flex-start, center, space-between, space-around	Reparto en el eje principal
align-items	stretch, center, flex-start	Alineación en el eje transversal
flex-wrap	nowrap, wrap	Si pasan a la línea siguiente
gap	10px	Espacio entre elementos

Propiedades de los elementos

Propiedad	Efecto
flex: 1	Reparte el espacio sobrante a partes iguales
flex: 1 1 200px	Puede crecer, encoger y parte de 200px
align-self	Alineación propia, distinta a la del contenedor

Centrar algo, el truco clásico

.centro { display: flex; justify-content: center; align-items: center; min-height: 100vh; }