Generador Flexbox
Ajusta un contenedor Flexbox en vivo y copia el CSS listo para usar.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Domina Flexbox sin tanteos
Elige dirección, alineación, salto de línea y espaciado: la vista previa se actualiza en vivo y el CSS del contenedor está listo para copiar.
-
Ajusta las propiedades
direction, justify, align, wrap, gap.
-
Observa la vista previa
Los elementos numerados reaccionan en vivo.
-
Copia el CSS
Aplícalo a tu contenedor.
El CSS del contenedor
| Propiedad | Función |
|---|---|
| display: flex | Activa Flexbox |
| flex-direction | Fila o columna |
| justify-content | Distribución (eje principal) |
| align-items | Alineación (eje secundario) |
| gap | Espacio entre elementos |
El CSS se aplica al padre; los hijos se colocan solos. Todo se genera en tu navegador.
Preguntas frecuentes
¿Para qué sirve Flexbox?
Flexbox es un modo de disposición CSS para alinear y distribuir elementos en una fila o columna. Gestiona automáticamente el espaciado, el centrado y el salto de línea, lo que simplifica mucho los diseños responsivos.
¿Qué diferencia hay entre justify-content y align-items?
justify-content distribuye los elementos a lo largo del eje principal (horizontal en row), align-items los alinea en el eje secundario (vertical en row). Si cambias a column, ambos ejes se invierten.
¿El CSS generado se aplica al contenedor o a los elementos?
Al contenedor. Las propiedades (display: flex, justify-content, etc.) van en el padre; los hijos se posicionan solos. La vista previa muestra elementos numerados para visualizar el efecto.
¿Qué hace flex-wrap?
Por defecto (nowrap), los elementos quedan en una sola línea, encogiéndose si hace falta. Con wrap, pasan a la siguiente línea cuando falta espacio — útil para rejillas fluidas.