Generador de CSS Flexbox

Herramienta gratuita para experimentar con diseños Flexbox ajustando flex-direction, justify-content, align-items, flex-wrap y gap con una vista previa en tiempo real. Copia el código CSS generado con un clic.

Última actualización: 2026-09-20

Construir una disposición Flexbox a mano

Flexbox es el método de disposición que ordena los elementos a lo largo de un solo eje. Esta herramienta le permite cambiar `flex-direction`, `justify-content`, `align-items`, `flex-wrap` y `gap` en pantalla, ver el resultado sobre la marcha y copiar el CSS terminado directamente.

**Casi toda dificultad con Flexbox se reduce a hacia dónde actúan `justify-content` y `align-items`.** El primero gobierna la colocación a lo largo del **eje principal** y el segundo a lo largo del **eje transversal**. Lo engorroso es que **en el momento en que cambia `flex-direction` de `row` a `column`, esos dos ejes se intercambian.** El `justify-content` que se ocupaba de lo horizontal mientras los elementos iban uno al lado del otro pasa a ocuparse de lo vertical en cuanto quedan apilados. La mayoría de las quejas de que algo "no se centra" equivalen a **no haber advertido que la propiedad a cambiar se ha intercambiado.**

Cómo se usa

Empiece por un ajuste preestablecido Disposiciones habituales como centrar, separar y apilar están a mano.
Cambie flex-direction **Moverse entre `row` y `column` hace visible el intercambio de los ejes.**
Pruebe las propiedades de alineación Cambie `justify-content` y `align-items` por turno y confirme cómo se comporta cada uno.
Copie el CSS generado Una vez que la disposición le satisfaga, puede pegarse directamente en su código.

Consejos para aprovecharla mejor

justify-content alinea los elementos a lo largo del "eje principal", mientras que align-items lo hace en el "eje transversal". Al cambiar flex-direction a column, el eje principal pasa a ser vertical, por lo que el efecto visual de estas dos propiedades se invierte.
El preset "Centrado" combina justify-content: center con align-items: center, la forma más habitual de centrar un elemento tanto horizontal como verticalmente con Flexbox.
La propiedad gap solo añade espacio entre los elementos, no alrededor del contenedor, así que a diferencia de margin crea un espaciado uniforme entre elementos hermanos sin afectar los bordes.
Definir align-self en un solo elemento anula el align-items del contenedor únicamente para ese elemento, útil cuando quieres que uno destaque con una alineación distinta al resto.
Activar flex-wrap: wrap permite que los elementos que ya no caben en el ancho del contenedor (o el alto, en modo columna) pasen automáticamente a la siguiente línea, una técnica habitual en diseños de tarjetas responsivos.

Cuándo resulta útil

Montar una barra de navegación

**Poner el logotipo a la izquierda y el menú a la derecha es el caso clásico de `justify-content: space-between`.**

Espaciar tarjetas por igual

Usar `gap` le ahorra el artificio de anular `margin` en aras de un espaciado parejo.

Centrar un elemento en ambas direcciones

**Poner tanto `justify-content` como `align-items` en `center` es el camino más corto.**

Aprender Flexbox

Cambiar un valor y observar el resultado enseña más rápido que cualquier lectura.

Términos de Flexbox

Eje principal: La dirección a lo largo de la cual se disponen los elementos, fijada por `flex-direction`. **Corre en horizontal con `row` y en vertical con `column`.**
Eje transversal: La dirección perpendicular al eje principal. **Cuando el principal se intercambia, este se intercambia con él.**
Justify-content: Gobierna la colocación **a lo largo del eje principal**, ofreciendo centrado, separación, distribución pareja y lo demás.
Align-items: Gobierna la colocación **a lo largo del eje transversal**. Bajo el `stretch` por defecto, los hijos crecen hasta la altura completa.
Flex-wrap: Decide si los elementos que no caben pasan a una línea nueva. Dejado en `nowrap` se los aprieta en su lugar.
Gap: El espacio dejado entre elementos. **A diferencia de `margin`, no añade espacio sobrante en los bordes exteriores.**

Preguntas frecuentes

justify-content controla la alineación a lo largo del "eje principal" de Flexbox (la dirección definida por flex-direction, horizontal por defecto), mientras que align-items controla la alineación en el "eje transversal" perpendicular. Con flex-direction: row el eje principal es horizontal, así que justify-content gestiona la posición horizontal y align-items la vertical; pero al cambiar a flex-direction: column el eje principal pasa a ser vertical, y estas dos propiedades intercambian sus funciones.

Cuando flex-direction es column, el eje principal es vertical, así que justify-content: center centra los elementos verticalmente. Para centrarlos también horizontalmente (el eje transversal), usa align-items: center. Combinando ambas propiedades puedes centrar el contenido en ambas direcciones incluso en un diseño de columna apilada.

El soporte de gap en Flexbox llegó con retraso a Chrome y Safari hasta aproximadamente 2021, pero hoy es compatible con todos los navegadores principales (Chrome 84+, Safari 14.1+, Firefox 63+). Si necesitas dar soporte a navegadores muy antiguos, considera usar margin como alternativa.

flex-grow determina cuánto se expande un elemento para ocupar el espacio sobrante cuando el contenedor tiene espacio extra, mientras que flex-shrink determina cuánto se reduce un elemento cuando el contenedor es demasiado estrecho para acomodar todos los elementos en su tamaño original. Ambas propiedades reparten el excedente o el déficit tomando como referencia el tamaño base del elemento (flex-basis).

Flexbox suele funcionar mejor para distribuir elementos en una sola dirección (una fila o una columna), como una barra de navegación o una fila de tarjetas. CSS Grid, en cambio, está pensado para controlar filas y columnas simultáneamente en un diseño verdaderamente bidimensional, como la retícula de una página completa. Como norma general, usa Flexbox para disposiciones lineales simples y Grid para estructuras más complejas tipo cuadrícula.

A propósito — Cómo Flexbox cambió la historia del diseño en CSS

Antes de la llegada de CSS Flexbox (formalmente CSS Flexible Box Layout Module), los diseños horizontales en la web se construían habitualmente con la propiedad float. Pero float fue diseñada originalmente para que el texto rodeara una imagen, no para crear diseños, por lo que usarla con ese fin requería muchas soluciones alternativas, entre las que destaca el truco "clearfix" para evitar que se colapsara la altura del elemento padre.

Flexbox, cuyo primer borrador publicó el W3C en 2009, se diseñó específicamente para diseños unidimensionales. Tareas que antes requerían varias líneas de trucos CSS con float —estirar elementos a lo largo del eje principal, repartir el espacio de forma uniforme o centrar contenido verticalmente— podían ahora expresarse con una sola propiedad declarativa como justify-content o align-items.

Cuando los principales navegadores completaron su implementación de Flexbox hacia 2015, se convirtió rápidamente en la forma estándar de crear patrones habituales del diseño web, como barras de navegación, diseños de tarjetas y alineación de formularios. En aquel momento, la comunidad de desarrolladores front-end acogió especialmente bien el hecho de que el centrado vertical, considerado durante mucho tiempo uno de los problemas más complicados de CSS, por fin tuviera una solución sencilla.

Hoy en día, Flexbox convive con CSS Grid, especializado en diseños bidimensionales, cada uno con un papel distinto: Flexbox para distribuir componentes a lo largo de una sola dirección, y Grid para estructurar la página completa como una cuadrícula.

Ver todas las curiosidades