Playground de CSS Flexbox
NuevoAjusta las propiedades de flex con vista previa en vivo y copia el CSS.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
Un generador visual de flexbox que escribe el CSS por ti
Este generador de flexbox convierte el modelo de diseño CSS Flexible Box en algo que puedes ver. En lugar de adivinar qué hará justify-content o align-items, activas cada propiedad en un control etiquetado y ves cómo la vista previa en vivo se reorganiza al instante — luego copias código limpio y listo para producción. Funciona completamente en tu navegador, sin registro y sin subir nada.
Es un verdadero playground de flexbox: un contenedor flex real con elementos hijos editables, controles completos del contenedor y por elemento, contenedores anidados, una vista previa responsiva redimensionable y una URL compartible. Ya sea que estés aprendiendo flexbox o construyendo rápidamente una barra de navegación, una fila de tarjetas o un héroe centrado, puedes obtener el diseño exacto — y el CSS, Tailwind o Bootstrap correspondiente — en segundos.
Cada propiedad del contenedor, con vista previa en vivo
Controla el contenedor como lo hace la especificación. Establece flex-direction (row, row-reverse, column, column-reverse) para elegir el eje principal, justify-content para espaciar elementos a lo largo de él, y align-items para alinearlos en el eje transversal. Activa flex-wrap para que los elementos fluyan hacia nuevas líneas, usa align-content para espaciar esas líneas envueltas, y ajusta valores independientes de gap de fila y columna.
Una leyenda de ejes integrada muestra qué dirección es el eje principal y cuál es el eje transversal al cambiar flex-direction, para que la relación entre justify-content y align-items finalmente quede clara. Es una hoja de trucos de flexbox práctica que aprendes haciendo.
Control por elemento: grow, shrink, basis, order y align-self
La mayoría de los generadores se detienen en el contenedor. Este te permite hacer clic en cualquier elemento de la vista previa y editarlo individualmente: establece flex-grow, flex-shrink y flex-basis (el atajo flex), anula su align-self y cambia su order para reposicionarlo sin tocar el HTML. Agrega o elimina elementos para probar cómo se redistribuye el espacio.
Eso hace que sea sencillo construir patrones reales — una barra lateral fija junto a una columna principal flexible (flex: 0 0 240px junto a flex: 1), un único elemento centrado, o un enlace de pie de página empujado al extremo derecho con margin-left: auto.
Flexbox anidado y vista previa responsiva
Los diseños reales se anidan. Cualquier elemento puede convertirse en su propio contenedor flex anidado con su propia dirección, justify y align — exactamente lo que un generador de flexbox anidado necesita para tarjetas que tienen una fila de encabezado sobre un cuerpo, o una barra de herramientas dentro de una barra de herramientas. El código generado incluye también las reglas anidadas.
Dado que flexbox trata del comportamiento responsivo, la vista previa es redimensionable: arrastra el controlador o elige un preset de ancho Móvil / Tableta / Escritorio y observa cómo los elementos se envuelven y realinean en cada tamaño. Es la forma más rápida de confirmar que un diseño flexbox responsivo se comporta correctamente antes de lanzarlo.
Copia como CSS, Tailwind o Bootstrap — y cómo se compara con otras herramientas
Cambia la pestaña de salida para obtener el formato que usa tu proyecto. CSS te da reglas limpias .container y por elemento usando el atajo flex. Tailwind escribe las clases de utilidad — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — en un fragmento HTML listo para pegar. Bootstrap genera las clases de utilidad equivalentes d-flex. Solo se emiten las propiedades que realmente cambiaste, por lo que la salida se mantiene mínima y legible en lugar de repetir cada valor predeterminado.
Otros generadores visuales como Flexbox.help y el generador de flexbox de Loading.io te dan las propiedades del contenedor pero omiten los controles por elemento y los contenedores anidados. El playground online de Tailwind no genera CSS vanilla. Esta herramienta hace los tres formatos de salida, maneja el anidamiento y funciona sin conexión una vez cargada — sin cuenta, sin costo, sin datos que salgan de tu navegador.
Frequently asked questions
¿Qué es Flexbox en CSS y para qué sirve?
Flexbox (el CSS Flexible Box Layout) es un modelo de diseño unidimensional para organizar elementos en una sola fila o columna y distribuir el espacio entre ellos. Se activa con una sola línea — display: flex — en el elemento padre, y sus hijos se convierten en elementos flex que puedes alinear, espaciar y redimensionar sin floats ni márgenes manuales. Se usa porque facilita tareas comunes: centrar elementos, columnas de igual altura, barras de navegación, filas de tarjetas y diseños de 'empuja esto a la derecha' que eran complicados antes.
¿Cómo se usa flexbox?
Agrega display: flex al elemento contenedor, luego controla los hijos con las propiedades del contenedor — flex-direction (row o column), justify-content (espaciado a lo largo del eje principal), align-items (alineación en el eje transversal), flex-wrap y gap. Por ejemplo, .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } organiza un logo y enlaces en una fila, centrados verticalmente, en los extremos opuestos.
¿Cómo centro un div con flexbox?
Convierte el padre en un contenedor flex y centra en ambos ejes: .parent { display: flex; justify-content: center; align-items: center; } — eso coloca el hijo exactamente en el centro horizontal y verticalmente. Dale al padre una altura (por ejemplo min-height: 100vh para centrado a pantalla completa). Es la forma más limpia de centrar perfectamente un elemento.
¿Cuál es la diferencia entre justify-content y align-items?
justify-content posiciona elementos a lo largo del eje principal, mientras que align-items los posiciona en el eje transversal. Con el flex-direction: row predeterminado, justify-content espacia los elementos horizontalmente y align-items los alinea verticalmente. Cambia a flex-direction: column y los dos se intercambian. La leyenda de ejes en vivo en la herramienta muestra cuál es cuál al cambiar de dirección.
¿Qué son flex-grow, flex-shrink y flex-basis?
Son las tres propiedades por elemento que deciden cómo se dimensiona un elemento flex, generalmente escritas juntas como el atajo flex. flex-basis es el tamaño inicial antes de compartir el espacio libre. flex-grow indica con qué avidez un elemento se expande para llenar el espacio sobrante (0 = no crecer, 1 = tomar una parte). flex-shrink indica con qué facilidad se encoge cuando el espacio es limitado. El común flex: 1 significa crecimiento igual para todos los elementos.
¿Cómo hago que los elementos flex se envuelvan?
Establece flex-wrap: wrap en el contenedor para que los elementos que no quepan se muevan a una nueva línea en lugar de desbordarse. Por defecto flex-wrap es nowrap. Con el ajuste activado, dale a los elementos un flex-basis (como flex: 1 1 200px) para que cada fila se llene ordenadamente, y usa align-content para espaciar las líneas resultantes.
¿Es este generador de flexbox gratuito y privado?
Gratuito sin necesidad de registro. Todo el playground funciona en tu navegador — tu diseño, el CSS generado y el enlace compartido se construyen en tu dispositivo y nunca se suben a un servidor. Puedes marcarlo como favorito y usarlo sin conexión una vez que la página haya cargado. No hay cuenta que crear ni límite en los diseños que puedes configurar.
Related tools
Ver todas las herramientas
Nuevo Mezclador de colores
Mezcla dos colores en cualquier proporción y copia el resultado o cualquier paso.
Nuevo Selector de color de imagen
Elige cualquier color de una imagen y extrae su paleta dominante en HEX, RGB y HSL.
Nuevo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Nuevo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Selector y conversor de color
Elige un color y conviértelo entre HEX, RGB, HSL y OKLCH.
Nuevo Verificador de contraste de color
Comprueba las relaciones de contraste WCAG AA/AAA entre el texto y el fondo.