Categoría: Desarrollo
Generador de Flexbox CSS
Crea un contenedor flex de forma visual y copia el CSS
Ajusta flex-direction, flex-wrap, justify-content, align-items y el espacio en una vista previa en vivo construida con elementos flex reales, y luego copia la declaración final del contenedor. Nada de esto sale de tu navegador.
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Flexbox tiene cinco propiedades que interactúan entre sí —la dirección cambia lo que significa el «eje principal» para el ajuste y el justify-content—, por eso es más rápido ver un cambio que imaginarlo. Esta herramienta mantiene un contenedor flex real en pantalla con elementos numerados dentro, así que cada opción se evalúa según cómo se mueven realmente las cajas y no según un modelo mental de la especificación.
Cómo se usa
- Define flex-direction y flex-wrap.
- Elige justify-content y align-items, y ajusta el espacio y el número de elementos.
- Copia la regla .container final en tu hoja de estilos.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿La vista previa es un diseño flex real?
- Sí. Las cajas numeradas se distribuyen con el CSS exacto que estás definiendo, no con una imagen, así que lo que ves es lo que produce la regla copiada.
- ¿Por qué cambiar flex-direction cambia lo que hace justify-content?
- justify-content siempre actúa a lo largo del eje principal, y flex-direction es lo que decide si ese eje es horizontal o vertical. Cambiar a column convierte el «justify» de izquierda/derecha en arriba/abajo.
- ¿Se sube algo de mi diseño?
- No. El CSS es texto generado en la página a partir de los controles que defines, y la vista previa se renderiza localmente.