Advanced Flexbox Forge

Simulador interactivo para el diseño de layouts flexibles. Visualiza instantáneamente cómo interactúan las propiedades de Flexbox (justify, align, gap) y genera el código CSS optimizado para tus contenedores.

Manual de Forjado

Ajusta los controles del panel izquierdo para mover los elementos del contenedor.
El área de previsualización muestra el comportamiento real del navegador.
Copia las reglas CSS generadas para implementarlas en tu hoja de estilos.

Justify Content

Align Items

Flex Direction

Gap (px): 20

1

2

3

CSS GENERADO