Playground de CSS Flexbox y Grid
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}Cómo funciona
Cambia entre el modo Flexbox y el modo Grid y construye un layout ajustando propiedades CSS reales con controles sencillos. En el contenedor puedes fijar la dirección, justify y align, wrap y gap; en cada elemento hijo puedes cambiar grow, shrink, order y la alineación. Añade o quita elementos para ver cómo responde el layout, y la vista previa en vivo se actualiza cada vez que cambias un valor. El CSS generado aparece en un panel listo para copiar, así que puedes pegar en tu proyecto una configuración de flex o de grid que funciona en lugar de adivinar combinaciones de propiedades. Es una forma rápida de aprender cómo se comportan de verdad flex-grow, align-items, grid-template-columns y compañía, o de prototipar un layout adaptable antes de escribirlo a mano. Todo se ejecuta en tu navegador, sin compilación, sin cuenta y sin subir nada a ningún sitio.
Preguntas frecuentes
¿Admite Flexbox y Grid?
- Sí. Cambia entre las pestañas Flexbox y Grid; cada una tiene su propio conjunto de controles para el contenedor y los elementos.
¿Puedo copiar el CSS generado?
- Sí. El panel de salida muestra el código exacto que necesita el layout actual y el botón Copiar lo pone en tu portapapeles.
¿Se guardan mis datos en algún sitio?
- No. Todo se ejecuta en tu navegador y no se sube ningún dato a ningún servidor.