Generador de flexbox CSS
Cambia las opciones y mira cómo se mueven los elementos al instante. El código de abajo muestra solo lo que cambiaste respecto al valor predeterminado.
Cómo usarFlexbox sin memorizar propiedades
Disponible en: 
Generador de flexbox CSS: para qué sirve
Flexbox es la forma más usada de alinear elementos en una fila o en una columna en CSS, pero los nombres de las propiedades confunden a quien está empezando.
Aquí cambias cada opción en un selector y ves cómo se mueven los elementos al instante: dirección, salto de línea, distribución en el eje principal, alineación en el eje transversal, align-content y espacio entre elementos. El código muestra solo lo que cambió respecto al valor predeterminado y avisa cuando una propiedad no tiene efecto con las otras opciones elegidas.
Cómo usar
- Elige las opciones de dirección, alineación y salto de línea.
- Ajusta el gap, la cantidad de elementos y el elemento que crece.
- Copia el CSS del contenedor.
Cuándo usar
- Centrar un elemento en la pantalla.
- Armar un menú o una fila de botones.
- Aprender flexbox en la práctica.
Preguntas frecuentes
¿Cuál es la diferencia entre justify-content y align-items?
justify-content distribuye los elementos en el eje principal (en horizontal, si la dirección es row) y align-items los alinea en el eje transversal (en vertical, en el mismo caso). Si cambias la dirección a column, los dos intercambian de eje.
¿Cuándo usar flexbox y cuándo grid?
Flexbox es para una dimensión: una fila de botones, un menú, elementos que se acomodan según el espacio. Grid es para dos dimensiones a la vez, como una galería o el layout de la página. Los dos se pueden usar juntos.
¿Para qué sirve el gap?
Pone espacio entre los elementos sin márgenes en los bordes, algo que antes exigía márgenes y selectores como :last-child. Funciona con flexbox en todos los navegadores actuales.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.