Desarrollador

Playground de CSS Flexbox Gratis

Aprende y experimenta con CSS Flexbox visualmente. Ajusta propiedades y copia el CSS generado. Sin registro.

100% gratis — no se necesita cuenta

Controles del Contenedor
Controles del Elemento

Elemento 1

Elemento 2

Elemento 3

Vista Previa
1
2
3
4
CSS Generado
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Funciones de Playground de CSS Flexbox Gratis

Experimenta con propiedades flex de forma interactiva

Controles del Contenedor

Direction, justify-content, align-items, wrap y gap — todos ajustables.

Copiar CSS

CSS generado para el contenedor listo para usar en tu proyecto.

5 Preajustes de Diseño

Diseños centrado, barra de navegación, barra lateral, tipo grilla y pie de página.

Vista Previa en Vivo

Ve los elementos flex coloreados responder a tus cambios en tiempo real.

Preguntas frecuentes

¿Cuándo debo usar Flexbox vs Grid?

Flexbox es mejor para diseños unidimensionales (filas O columnas). Grid es para diseños bidimensionales (filas Y columnas). Muchos diseños usan ambos.

¿Qué hace flex-wrap?

Por defecto, los elementos flex permanecen en una línea y se encogen. flex-wrap: wrap permite que los elementos pasen a la siguiente línea cuando no caben.

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

justify-content alinea elementos a lo largo del eje principal (horizontal en row, vertical en column). align-items alinea a lo largo del eje cruzado (perpendicular).

¿Te gustan nuestras herramientas gratuitas?

Más utilidades CSS

Gradiente CSS, box shadow, conversor Tailwind y más.

Ver todas las herramientas