Generador CSS Flexbox
Generador CSS Flexbox gratis: vista previa en tiempo real, CSS y Tailwind simultáneos, 10 layouts predefinidos, avisos contextuales y exportación React/JSX. Sin registro.
Actualizado junio de 2026
Revisado por Rafael Duarte
Requiere flex-wrap: wrap
flex
gap-4Haz clic en un ítem para editar sus propiedades.
Cómo funciona
De un preset a código listo en menos de un minuto
1. Elige un preset
Navbar, Card Grid, Sidebar, Holy Grail, App Shell — la vista previa y el código se actualizan al instante.
2. Ajusta el contenedor y los ítems
flex-direction, justify-content, align-items… o haz clic en un ítem del preview para editar grow, shrink, basis y order.
3. Copia el código
Cambia entre las pestañas Tailwind, CSS y React, copia con un clic o descarga el archivo .css.
Qué hace este generador de flexbox
Salida dual, avisos que explican el porqué
Tailwind, CSS y React al mismo tiempo
Las tres salidas están disponibles en pestañas separadas, sin tener que traducir clases a mano.
10 layouts predefinidos
Navbar, Hero centrado, Card Grid, Sidebar, Holy Grail, App Shell y más — parte de un patrón real en vez de una casilla en blanco.
Avisos contextuales
Cuando una propiedad no tiene efecto con la configuración actual (por ejemplo align-content sin wrap), la herramienta te dice por qué.
Edición por ítem
Selecciona cualquier caja del preview para ajustar flex-grow, flex-shrink, flex-basis, align-self y order de forma individual.
Vista previa responsiva
Alterna el viewport entre mobile (375px), tablet (768px) y desktop para comprobar el layout antes de copiar nada.
Preset App Shell con múltiples bloques
Genera de una vez el CSS/Tailwind/React de navbar, sidebar y contenido para el esqueleto típico de una aplicación.
Ejemplos
Patrones comunes y el CSS que generan
Cuándo vas a necesitar esta herramienta
Los escenarios más frecuentes entre quienes maquetan con flexbox
Barras de navegación
flex + justify-content:space-between + align-items:center — logo a la izquierda, enlaces a la derecha, todo alineado verticalmente.
Centrar un elemento
La forma más rápida de centrar un div en los dos ejes, sin trucos de margin ni position absolute.
Filas de tarjetas
flex-wrap:wrap + gap — las tarjetas pasan a la siguiente línea cuando el viewport se estrecha, sin media queries adicionales.
Sidebar + contenido
Un ítem con ancho fijo y otro con flex-grow:1 que ocupa el resto del espacio disponible.
Campos de formulario en línea
flex + align-items:center + gap — etiqueta e input alineados en la misma fila, con espaciado consistente.
Grupos de botones
flex-wrap:wrap + justify-content:flex-end + gap — los botones se acomodan en pantallas pequeñas sin romper el layout.
Errores comunes con flexbox
Los que más aparecen al maquetar con flex
Confundir justify-content con align-items
justify-content controla el eje principal; align-items controla el eje transversal (perpendicular). Con flex-direction:column, los dos se invierten.
align-content sin flex-wrap:wrap
align-content solo tiene efecto cuando los ítems realmente saltaron a varias líneas — la herramienta avisa cuando esto sucede.
Esperar que order cambie el orden del DOM
order solo reordena visualmente los ítems; el orden de tabulación sigue el DOM, lo que afecta a la accesibilidad si dependes de él.
Los ítems no encogen por debajo de su contenido
Por defecto min-width es auto — un ítem no se encoge más allá de su propio contenido aunque tenga flex-shrink, causando overflow. Define min-width:0 en el ítem para permitir que encoja de verdad.
Olvidar que align-items:stretch es el valor por defecto
Sin definir align-items, los ítems se estiran para llenar la altura del contenedor en el eje transversal — algo que sorprende a quien esperaba altura automática. Usa align-items:flex-start si no quieres ese comportamiento.
Contenedor sin altura para centrar verticalmente
justify-content:center y align-items:center solo centran de verdad si el contenedor tiene una altura definida (fija, 100vh o heredada del padre) — sin altura no hay espacio extra que repartir.
Por qué usar este generador
Muestra clases Tailwind, CSS puro y un objeto de estilos React al mismo tiempo — la mayoría de los generadores de flexbox solo ofrecen un formato de salida.
Los avisos contextuales explican por qué una propiedad no está funcionando, ahorrando el ensayo y error que casi todo desarrollador enfrenta con align-content y flex-wrap.
Además del código, simula el layout en tres anchos de pantalla y permite editar hasta 8 ítems por separado — grow, shrink, basis, align-self y order — directo en el preview, sin necesidad de probarlo primero en tu propio proyecto.
Flexbox vs. CSS Grid
Cuándo conviene usar cada uno
Preguntas frecuentes
justify-content controla el eje principal (horizontal en row, vertical en column). align-items controla el eje transversal. Para centrar en los dos ejes, define ambos como center.
Referencias
Referencia completa de la especificación, con datos de compatibilidad entre navegadores.
La guía visual más consultada para entender cada propiedad de flexbox con ejemplos.
La especificación oficial que define el comportamiento de todas las propiedades de flexbox.
Herramientas relacionadas
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind Diseño Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
