Playground de CSS Flexbox

Aprende y experimenta con CSS Flexbox. Ajusta las propiedades del contenedor y observa cómo se actualiza el diseño en tiempo real.

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Número de elementos: 5

Vista previa

CSS

Características

Panel de propiedades del contenedor

Añadir o quitar elementos

Ajustes individuales por elemento

Vista previa del diseño en directo

Genera el código CSS

Cómo Usar

1. Ajusta las propiedades del contenedor (direction, wrap, justify-content, align-items).

2. Añade o elimina elementos flex.

3. Observa cómo se actualiza el diseño en vivo y copia el CSS.

Sobre esta herramienta

Flexbox coloca los elementos a lo largo de un eje —una fila o una columna— y reparte el espacio entre ellos. El problema es que unas cuantas propiedades interactúan: flex-direction fija el eje principal, justify-content alinea los elementos a lo largo de él, align-items los alinea en el eje transversal, flex-wrap decide si pasan a una nueva línea y gap fija un espaciado uniforme. Este banco de pruebas te deja cambiar cada propiedad y ver al instante cómo se reorganizan unas cajas de colores, que es la forma más rápida de desarrollar intuición o depurar un diseño que no se comporta como esperas. Añade o quita elementos para probar el ajuste de línea y copia el CSS generado para el contenedor. Para diseños bidimensionales en los que filas y columnas deben alinearse, CSS Grid suele ser la mejor herramienta.

Preguntas Frecuentes

¿Qué diferencia hay entre justify-content y align-items?

justify-content reparte los elementos a lo largo del eje principal que fija flex-direction, y align-items los posiciona en el eje transversal. En una fila, justify-content actúa en horizontal y align-items en vertical; en una columna los papeles se intercambian.

¿Por qué parece que justify-content no hace nada?

Solo tiene efecto cuando hay espacio libre en el eje principal. Si los elementos ya llenan el contenedor, por ejemplo porque tienen flex: 1 o un ancho grande, no queda nada que repartir.

¿Cuándo debo usar gap en lugar de márgenes?

gap añade espacio solo entre elementos, nunca en los bordes exteriores, y funciona tanto en filas como en líneas ajustadas. Es más sencillo y predecible que los márgenes, y todos los navegadores actuales lo admiten en flexbox.

¿Qué cambia flex-wrap?

Con nowrap, los elementos se quedan en una línea y se encogen si hace falta. Con wrap, pasan a líneas adicionales cuando se quedan sin espacio, y wrap-reverse apila esas líneas en sentido contrario.

¿Debo usar Flexbox o Grid?

Usa Flexbox para disposiciones de una dimensión, como barras de navegación, grupos de botones o para centrar contenido. Usa Grid cuando necesites elementos alineados en filas y columnas a la vez, como galerías de tarjetas o estructuras de página.