Acerca de esta herramienta
Este generador crea declaraciones Flexbox modernas y estándar para un contenedor. La vista previa incluye varios elementos numerados y aplica al instante los cambios para comparar alineaciones.
Cómo usarla
- Configura flex-direction para definir el eje principal.
- Elige justify-content y align-items.
- Configura flex-wrap y el espacio gap.
- Observa las posiciones de los elementos y copia el CSS de .container.
Ejemplos de uso
- row + center centra los elementos horizontalmente.
- column orienta el eje principal en vertical.
- wrap permite pasar a otra línea si falta espacio; nowrap mantiene una sola línea.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}Funcionamiento y explicación del CSS
justify-content controla la distribución en el eje principal y align-items la alineación en el eje transversal. Con row, el eje principal suele ser horizontal; con column pasa a vertical. flex-wrap decide si se crean nuevas líneas al faltar espacio y gap separa elementos o líneas contiguos.
Usos habituales
- Crear navegaciones, grupos de botones y filas de tarjetas.
- Comprender el eje principal y el transversal.
- Comparar space-between, space-around y space-evenly.
Privacidad
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
FAQ
¿Qué diferencia hay entre justify-content y align-items?
La primera propiedad distribuye en el eje principal y la segunda alinea en el transversal. No equivalen siempre a horizontal y vertical.
¿Qué ocurre con el eje principal al cambiar flex-direction?
row usa la dirección de fila y column la de columna; las variantes reverse invierten el sentido correspondiente.
¿Cuándo conviene usar flex-wrap?
Usa wrap cuando no quieras comprimir los elementos en una sola línea y el contenedor pueda admitir varias.
¿Se puede usar gap en Flexbox?
Sí. Define la separación entre elementos y líneas. La salida usa la propiedad estándar gap.