↔
Generador Flexbox CSS
Prueba dirección, alineación, distribución, wrap y gap con una vista previa Flexbox.
1
2
3
4
5
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;Cómo funciona
Selecciona las propiedades Flexbox principales. El contenedor de ejemplo se actualiza inmediatamente y el código CSS queda listo para copiar.
Preguntas frecuentes
¿Qué propiedades puedo configurar?
Incluye flex-direction, justify-content, align-items, flex-wrap y gap.
¿Sirve para aprender Flexbox?
Sí. La vista previa permite observar cómo cambia la distribución al modificar cada propiedad.