Generador CSS Flexbox
El generador de Flexbox CSS te permite configurar flex-direction, justify-content, align-items, flex-wrap, align-content y gap en un contenedor, previsualizar hasta 20 elementos en vivo y copiar el CSS generado.
Acerca de esta herramienta
El generador de Flexbox CSS te permite configurar flex-direction, justify-content, align-items, flex-wrap, align-content y gap en un contenedor, previsualizar hasta 20 elementos en vivo y copiar el CSS generado.
Cómo se usa
- Elige la dirección y el ajuste de línea (wrap).
- Configura justify-content y align-items (y align-content si hay varias líneas).
- Ajusta el gap y el número de elementos de la vista previa.
- Haz clic en Copiar CSS para usar las reglas del contenedor.
Datos útiles
- justify-content alinea los elementos a lo largo del eje principal; align-items los alinea en el eje transversal.
- flex-direction: column intercambia los ejes, de modo que justify-content pasa a funcionar en vertical.
- align-content solo tiene efecto cuando los elementos se reparten en varias líneas.
- La propiedad gap funciona en Flexbox en todos los navegadores principales actuales.
- Flexbox es unidimensional; usa CSS Grid para controlar filas y columnas a la vez.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo centro un div con Flexbox?
En el elemento padre, define display: flex; justify-content: center; align-items: center; y el hijo quedará centrado horizontal y verticalmente.
¿Qué diferencia hay entre justify-content y align-items?
justify-content distribuye los elementos a lo largo del eje principal (una fila por defecto); align-items los posiciona en el eje transversal.
¿Cuándo usar Flexbox en lugar de Grid?
Usa Flexbox para layouts unidimensionales, como barras de navegación y filas de botones, y Grid para layouts de página bidimensionales.
¿Por qué align-content no hace nada?
align-content solo se aplica cuando flex-wrap permite que los elementos se repartan en más de una línea.