Generador visual de flexbox
Diseña el layout moviendo controles, mira el resultado al instante y copia el CSS o las clases de Tailwind.
Contenedor
Elemento 2 de 3
- El eje principal es horizontal; el eje transversal es vertical.
- El espacio libre se reparte entre elementos; el primero y el último tocan los bordes.
- En el eje transversal se centran.
- Todo va en una sola línea: si no cabe, los elementos encogen según su flex-shrink.
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.item-2 {
flex: 1 1 auto;
}
Notas
- Solo se generan las propiedades que cambian respecto al valor por defecto.
- flex se escribe siempre con sus tres valores (grow shrink basis) para evitar la trampa de flex: 1, que fija flex-basis a 0 %.
- Las clases de Tailwind son de la versión 4 y se han comprobado equivalentes al CSS generado.
- order solo cambia el orden visual: lectores de pantalla y teclado siguen el orden del HTML.
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Flexbox resuelve casi todos los layouts de una dimensión, pero cuesta recordar qué eje controla justify-content, por qué un elemento no encoge o qué hace realmente flex: 1. Este generador te deja probarlo con las manos: cambias una propiedad y ves al momento cómo se mueven los elementos, con los ejes indicados y una explicación de cada valor. Puedes redimensionar el contenedor para ver cuándo saltan de línea, editar cada elemento por separado y partir de plantillas comunes. El resultado se exporta como CSS limpio o como clases de Tailwind.
Características
- ✓Todas las propiedades del contenedor: flex-direction, flex-wrap, justify-content, align-items, align-content y gap
- ✓Propiedades por elemento: flex-grow, flex-shrink, flex-basis, align-self y order
- ✓Vista previa en vivo con ancho y alto ajustables para ver cómo se reparten y saltan de línea
- ✓Explicación en lenguaje claro de los ejes y de lo que hace cada valor
- ✓Plantillas listas: centrar, navbar, tarjetas, sidebar, footer pegado y objeto media
- ✓Exporta CSS con tus nombres de clase, el HTML y la versión con clases de Tailwind v4
- ✓Solo genera lo que difiere del valor por defecto y escribe flex con sus tres valores
- ✓Equivalencia entre CSS y Tailwind comprobada en miles de combinaciones
¿Cómo crear un layout con flexbox?
- 1
Elige una plantilla o empieza de cero
Usa una plantilla como navbar o tarjetas, o ajusta las propiedades del contenedor.
- 2
Ajusta cada elemento
Pulsa un elemento en la vista previa y cambia su grow, shrink, basis, alineación u orden.
- 3
Prueba tamaños
Cambia el ancho y alto del contenedor para comprobar cómo responde el layout.
- 4
Copia el código
Elige CSS, HTML o Tailwind, pon tus nombres de clase y copia.
Preguntas frecuentes
¿Qué diferencia hay entre justify-content y align-items?
justify-content reparte los elementos en el eje principal, que es horizontal con flex-direction: row y vertical con column. align-items los alinea en el eje transversal, perpendicular al principal.
¿Qué significa flex: 1?
Es la abreviatura de flex-grow: 1, flex-shrink: 1 y flex-basis: 0 %. Por eso varios elementos con flex: 1 miden lo mismo aunque su contenido sea distinto. Si quieres que crezcan desde su tamaño natural, usa flex: 1 1 auto.
¿Por qué mi elemento no encoge?
Puede tener flex-shrink: 0 o un contenido que no se puede partir, como una palabra larga o una imagen. Los elementos flex tienen min-width: auto por defecto; añadir min-width: 0 permite que encojan por debajo de su contenido.
¿Cuándo usar flexbox y cuándo CSS Grid?
Flexbox es ideal para distribuir elementos en una dirección: barras, botones o listas que se ajustan. Grid es mejor cuando necesitas controlar filas y columnas a la vez, como el layout general de una página.
¿El código de Tailwind es equivalente al CSS?
Sí. Se usan las clases de Tailwind v4 y valores arbitrarios cuando no hay clase equivalente, y la equivalencia se ha verificado propiedad por propiedad en miles de combinaciones.
Herramientas relacionadas
Incrusta Generador de Flexbox en tu web
Integra Generador de Flexbox en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/flexbox-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de Flexbox — miguelacm.es"
></iframe>