Playground de Flexbox - Manipula Flexbox visualmente y obtén CSS

Cambia flex-direction/justify-content/align-items etc. con menús desplegables y ve los resultados en tiempo real.

8px
5
preview
1
2
3
4
5
cssCode
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 8px;
}

Cómo usar

  1. Establece flex-direction/justify-content etc. con menús desplegables
  2. Ajusta el número de elementos hijo
  3. Vista previa en tiempo real en el panel derecho
  4. Copia el código CSS

Preguntas frecuentes

¿Qué propiedades Flexbox se pueden controlar?
flex-direction, justify-content, align-items, flex-wrap, gap y otras propiedades principales.
¿Se puede cambiar el número de elementos hijos?
Sí. Puedes agregar y eliminar elementos hijos.
¿El CSS generado se puede usar directamente?
Sí. Copia el código y pégalo directamente en tu archivo CSS.
¿Se envían mis datos a un servidor?
Todo el procesamiento ocurre en el navegador. No se envían datos a un servidor.
¿Cómo funcionan flex-wrap y flex-direction juntos?
Establece el eje principal con flex-direction y habilita el ajuste con flex-wrap para explorar visualmente diseños de varias filas o columnas.

Herramientas relacionadas

Generador de CSS GridConfigura grid-template-columns/rows visualmente y genera código CSSGenerador de Box ShadowAjusta visualmente el box-shadow CSS y copia el código

Historial de actualizaciones

Última actualización: 2026-02-21

  • 2026-02-21 Lanzamiento inicial