Este generador de Flexbox CSS es un playground visual para aprender y crear diseños con display: flex. Cambia las propiedades del contenedor y ve el efecto al instante sobre los elementos, luego copia el código. Ideal para entender de una vez justify-content, align-items y compañía. Funciona en tu navegador, sin registro y en español.
Cómo usar el generador de Flexbox
- Ajusta la dirección, la alineación y el gap con los selectores.
- Cambia el número de elementos para ver cómo se reparten.
- Copia el CSS y aplícalo a tu contenedor.
Las propiedades clave de Flexbox
flex-direction define el eje principal (fila o columna). justify-content alinea los elementos a lo largo de ese eje y align-items en el eje perpendicular. flex-wrap permite que los elementos salten de línea, y gap añade separación entre ellos. ¿Necesitas rejillas en dos dimensiones? Usa nuestro generador de CSS Grid, y para más utilidades visita las herramientas CSS.
Preguntas frecuentes
¿Cuándo usar Flexbox y cuándo Grid?
Flexbox es ideal para distribuir elementos en una dimensión (una fila o una columna). Grid es mejor cuando necesitas maquetar en filas y columnas a la vez.
¿Qué diferencia hay entre justify-content y align-items?
justify-content alinea en el eje principal (el que marca flex-direction) y align-items en el eje perpendicular.
¿Funciona en todos los navegadores?
Sí, Flexbox está soportado por todos los navegadores modernos desde hace años.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
