¿Diferencia entre justify-content y align-items?

justify-content alinea sobre el eje principal (la dirección que fluye el contenedor); align-items alinea sobre el eje cruzado. Cambia direction a column y verás cómo se intercambian.

¿Por qué align-items stretch llena el contenedor?

Stretch es el por defecto. Le dice a los ítems sin tamaño explícito en el eje cruzado que llenen el espacio. Otro valor encoge los ítems al contenido.

¿Cuándo importa flex-wrap?

Cuando los ítems no caben en una línea. Con wrap pasan a la siguiente línea; con nowrap (por defecto) se encogen para caber o desbordan.

¿Por qué la clase Tailwind usa valor arbitrario?

La mayoría de propiedades flex tienen clase dedicada (flex, justify-center, items-center, gap-2). Los gaps con valores custom (8px, 12px) usan valores arbitrarios como gap-[8px].

Playground de CSS Flexbox

Ajusta cada propiedad flex haciendo clic en vez de escribir. La vista previa se actualiza al instante para que el significado de cada valor sea obvio, y el cuadro de salida te da tanto la regla CSS cruda como las clases utility de Tailwind equivalentes. Ideal para aprender el modelo, depurar layouts o pegar la combinación correcta en un proyecto.

—

flex-direction

flex-wrap

justify-content

align-items

gap (px)Ítems

Vista previa

CSS

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

Tailwind

flex gap-[8px]

Cómo usar

Pulsa las chips de cada propiedad para fijar su valor.
Ajusta el gap y el número de ítems para una vista previa más representativa.
Copia la regla CSS o la clase Tailwind a tu proyecto.

Preguntas frecuentes

¿Diferencia entre justify-content y align-items?: justify-content alinea sobre el eje principal (la dirección que fluye el contenedor); align-items alinea sobre el eje cruzado. Cambia direction a column y verás cómo se intercambian.
¿Por qué align-items stretch llena el contenedor?: Stretch es el por defecto. Le dice a los ítems sin tamaño explícito en el eje cruzado que llenen el espacio. Otro valor encoge los ítems al contenido.
¿Cuándo importa flex-wrap?: Cuando los ítems no caben en una línea. Con wrap pasan a la siguiente línea; con nowrap (por defecto) se encogen para caber o desbordan.
¿Por qué la clase Tailwind usa valor arbitrario?: La mayoría de propiedades flex tienen clase dedicada (flex, justify-center, items-center, gap-2). Los gaps con valores custom (8px, 12px) usan valores arbitrarios como gap-[8px].

Herramientas relacionadas

Playground de CSS Grid

Elige visualmente grid-template-columns / rows, gap y alineación de ítems — copia el CSS a tu proyecto.

Desarrollo 0 0

Playground de Filtros CSS

Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.

Color 0 0

Generador de Animación CSS

Construye una animación CSS visualmente — elige preset, ajusta duración/easing/iteración, mira el preview y copia los keyframes.

Desarrollo 0 0

Generador de CSS clip-path (polígono, círculo)

Generador visual de la propiedad CSS `clip-path` — elige una forma (círculo, elipse, inset o polígono), ajusta números con sliders o haz clic en la vista previa para añadir puntos del polígono, y copia una declaración CSS lista para pegar. Incluye 10 presets (triángulo, hexágono, estrella, flecha, bocadillo, plus, …).

Color 0 0

Constructor de Expresiones Cron

Construye una expresión cron con clics — cada hora, día, semana, mes o totalmente custom — compañero del Cron Explainer.

Desarrollo 0 0

Detector de Caracteres Invisibles / Zero-Width

Detecta NBSPs, caracteres zero-width, marcas bidi y tabs en texto pegado — y límpialos.

Desarrollo 0 0