Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
justify-content alinea los elementos a lo largo del eje principal; align-items los alinea en el eje cruzado. Juntas controlan toda la alineación de un contenedor flex.
Explicación
Flexbox tiene dos ejes de alineación, uno para cada propiedad:
justify-contentAlinea en el eje principal: flex-start, center, flex-end, space-between, space-around.
align-itemsAlinea en el eje cruzado (perpendicular): flex-start, center, flex-end, stretch.
space-betweenDistribuye el espacio sobrante entre los elementos, dejando el primero y el último pegados a los bordes.
Reto rápido
Cambia justify-content y align-items a distintos valores y observa cómo se mueven los items.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Para centrar algo perfectamente en ambos ejes, combina justify-content: center con align-items: center en el mismo contenedor flex.
Dato extra
Si cambias flex-direction a column, los ejes se invierten: justify-content pasa a controlar el eje vertical y align-items el horizontal.
Error común
Confundir cuál propiedad controla qué eje: recuerda que "justify" siempre sigue la dirección principal (flex-direction), no siempre la horizontal.
Siguiente paso
Con la alineación dominada, veamos qué pasa cuando los elementos no caben en una sola línea.
Ir a la siguiente lección