Generador de Flexbox CSS

Elige visualmente las propiedades de un contenedor Flexbox (dirección, alineación, espaciado, salto de línea) y obtén el código CSS correspondiente, con vista previa en vivo.

Ejemplo:

Cómo funciona

Flexbox es el sistema de diseño CSS más utilizado para alinear elementos sobre un eje (fila o columna). Esta herramienta te evita tener que memorizar los valores exactos de justify-content o align-items: ajusta los menús desplegables y copia directamente el bloque CSS generado en tu hoja de estilos.

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

justify-content alinea los elementos a lo largo del eje principal (definido por flex-direction), mientras que align-items los alinea a lo largo del eje perpendicular (el eje secundario).

¿Cuándo debo activar flex-wrap?

Actívalo cuando quieras que los elementos pasen a la línea siguiente cuando ya no quepan en el ancho del contenedor, en lugar de comprimirse o desbordarse.

Procesamiento 100% local: el código se genera íntegramente en tu navegador mediante WebAssembly.