Generador de Flexbox
Alterna justify, align, direction y wrap, previsualiza y copia el CSS de flex
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cambia flex-direction, justify-content, align-items, flex-wrap y el espaciado (gap) con menús y deslizadores, y comprueba la alineación del flexbox en una vista previa en tiempo real. También puedes ajustar el número de elementos y copiar el CSS de flex para pegarlo tal cual en el contenedor padre.
Cómo usar
- Elige flex-direction y flex-wrap para fijar la dirección y el salto de línea.
- Ajusta la alineación con justify-content (eje principal) y align-items (eje cruzado).
- Perfila la vista previa a tu gusto con el deslizador de gap y el número de elementos.
- Copia el CSS del contenedor padre ya terminado y aplícalo a tu maquetación real.
Preguntas frecuentes
- Me lío con justify-content y align-items.
- justify-content alinea en la dirección del «eje principal (main axis)». Si flex-direction es row, el eje principal es horizontal; si es column, es vertical. align-items alinea en el «eje cruzado (cross axis)», perpendicular al anterior, así que al cambiar la dirección ambos intercambian su función.
- El valor stretch de align-items no se ve en la vista previa.
- stretch solo llena el eje cruzado cuando el hijo no tiene una altura (o anchura) fija. Los elementos de esta vista previa no llevan altura definida, por eso stretch funciona; cambia a center, flex-start, etc. para ver las diferencias de alineación.
- ¿Dónde pego el CSS copiado?
- Las propiedades flex se aplican al «padre (contenedor)» que envuelve a los hijos, no a los hijos. Ten en cuenta que el renderizado puede variar ligeramente según el navegador y su versión, así que confírmalo en el entorno real antes de usarlo.