Editor visual de CSS Flexbox y Grid
Diseña disposiciones CSS con una vista previa interactiva.
Generador visual de disposiciones con simulación de tamaños de pantalla y controles por elemento.
Propiedades del contenedor Flex
6
Añade y quita elementos sin salir del lienzo.
Acerca de esta herramienta
Explora Flexbox y CSS Grid sin alternar constantemente entre código y navegador. Cambia la dirección, la alineación, los espacios y las columnas o filas mientras observas el resultado en el lienzo.
Añade o quita elementos y simula anchos de escritorio, tableta y móvil para comprobar cómo responde la disposición. Copia el CSS generado y ajústalo a tu proyecto.
Uso práctico
Prueba varias combinaciones visualmente antes de integrarlas en una interfaz. Revisa el resultado final en tu página real, con su contenido y estilos propios.