¿Cuál es la diferencia entre justify-content y align-items?

justify-content posiciona los elementos en el eje principal (la dirección definida por flex-direction), mientras que align-items los posiciona en el eje cruzado perpendicular.

¿Qué es el eje principal?

Es la dirección principal en la que fluyen los elementos. Con flex-direction: row es horizontal; con column es vertical.

¿Cuándo importa flex-wrap?

Solo cuando los elementos juntos son más anchos (o altos) que el contenedor. Con wrap, los elementos extra se mueven a una nueva línea en lugar de encoger o desbordarse.

gap añade espaciado uniforme entre los elementos flex sin necesidad de márgenes, manteniendo el layout limpio.

¿Se envía algo a un servidor?

No. El laboratorio funciona completamente en tu navegador y nada se sube al servidor.

Laboratorio de Flexbox

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Elementos: 4

Vista previa

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Sitios externos relacionados

Algunos enlaces son enlaces de afiliados.

AmazonEl mayor mercado en línea del mundo para compras, electrónica, libros, software y más. El envío rápido, las devoluciones sencillas y el vasto catálogo de productos lo convierten en el favorito para las compras diarias. La membresía Prime añade streaming, envío gratuito y ofertas exclusivas.UdemyUn mercado de aprendizaje en línea con más de 250.000 cursos sobre programación, diseño, negocios y más. Los cursos son impartidos por expertos del sector y disponibles a tu propio ritmo. Las frecuentes ofertas lo convierten en una de las formas más económicas de aprender.

Herramientas relacionadas

Generador de CSS clamp()Convierte un tamaño mínimo y máximo y un rango de viewport en un valor CSS clamp() fluido para tipografía y espaciado responsivos, con vista previa. En tu navegador.Formateador JSONFormatea, comprime y valida JSON online de forma gratuita. ¿JSON roto? Muestra la línea y columna exacta del error con resaltado. Nada se sube.Base64 Codificar / DecodificarCodifica texto a Base64 o decodifica Base64 al instante — tildes y emojis sin errores (UTF-8), Base64 seguro para URL, imagen a data URL. Todo en el navegador.Probador de RegexPrueba expresiones regulares con resaltado de coincidencias en vivo, grupos de captura, flags y vista previa de reemplazo. Todo en tu navegador, sin subir nada.

Experimenta con CSS Flexbox de forma visual. Cambia flex-direction, justify-content, align-items, flex-wrap y gap y observa la vista previa en tiempo real, luego copia el CSS generado. Es la manera más rápida de entender cómo interactúan las propiedades flex o ajustar un layout. Todo funciona en tu navegador.

Cómo usarlo

Cambia las propiedades flex con los botones.
Observa cómo se reorganizan los elementos en tiempo real.
Ajusta el número de elementos y copia el CSS en tu proyecto.

Eje principal y eje cruzado

Un contenedor flex dispone los elementos a lo largo de un eje principal definido por flex-direction (fila o columna). justify-content posiciona los elementos a lo largo de ese eje principal, mientras que align-items los posiciona en el eje cruzado (perpendicular a él). flex-wrap decide si los elementos saltan a nuevas líneas, y gap añade espaciado uniforme entre ellos.

Funciones

Todas las propiedades clave

Controla direction, justify-content, align-items, wrap y gap.

Vista previa en vivo

Ve cómo se reordenan los elementos al instante al cambiar cada propiedad.

Número de elementos ajustable

Cambia el número de cajas para ver cómo responden los layouts.

Copia el CSS

Obtén una regla CSS lista para usar en tu contenedor.

Cuándo usarlo

Prototipado

Encuentra rápidamente los ajustes flex correctos para un layout antes de codificarlo.

Aprender Flexbox

Desarrolla intuición sobre cómo se comportan justify y align juntos.

Corregir alineación

Prueba combinaciones para centrar o distribuir elementos correctamente.

Enseñanza

Muestra el comportamiento de Flexbox en vivo a estudiantes o compañeros.

Notas

El eje principal sigue flex-direction (row o column).
justify-content actúa en el eje principal; align-items en el eje cruzado.
El ajuste de línea solo importa cuando los elementos superan el ancho del contenedor.
Todo funciona en tu dispositivo; nada se sube al servidor.

Preguntas frecuentes

¿Cuál es la diferencia entre justify-content y align-items?: justify-content posiciona los elementos en el eje principal (la dirección definida por flex-direction), mientras que align-items los posiciona en el eje cruzado perpendicular.
¿Qué es el eje principal?: Es la dirección principal en la que fluyen los elementos. Con flex-direction: row es horizontal; con column es vertical.
¿Cuándo importa flex-wrap?: Solo cuando los elementos juntos son más anchos (o altos) que el contenedor. Con wrap, los elementos extra se mueven a una nueva línea en lugar de encoger o desbordarse.
¿Qué hace gap?: gap añade espaciado uniforme entre los elementos flex sin necesidad de márgenes, manteniendo el layout limpio.
¿Se envía algo a un servidor?: No. El laboratorio funciona completamente en tu navegador y nada se sube al servidor.