Generador de CSS Flexbox

Un generador de Flexbox que muestra el espacio libre

El contenedor del escenario de este generador de CSS Flexbox es una caja display: flex real. Al pulsar la dirección, el salto de línea, la alineación y el espacio entre elementos, los elementos se mueven en el momento. Si arrastras el tirador de la esquina para cambiar el ancho y el alto, ves justo cuándo los elementos pasan a la línea siguiente y cuándo se encogen. Las guías dibujan los ejes principal y transversal como flechas, el gap como barras oscuras y el espacio libre que ningún elemento ocupa como un rayado con su medida. Cuando un elemento se sale del contenedor, el exceso aparece como un rayado rojo.

Elige un elemento y cambia valores como flex: 1, auto o none: el cálculo de tamaños de más abajo sigue el orden de la especificación de CSS Flexbox (§9.7) y muestra cómo se repartió el espacio libre. Ese resultado se compara, con un margen de 1px, con el tamaño que el navegador dibujó de verdad. Cuando la disposición te convence, copia el CSS y el HTML, o copia un enlace que guarda el estado actual en la dirección.

Cuándo usar Flexbox y en qué se diferencia de Grid

Flexbox coloca los elementos en una sola dirección y reparte el espacio dentro de esa línea. Aunque pasen a varias líneas, cada línea calcula su espacio por separado, así que los bordes de las columnas de una línea no coinciden con los de la siguiente. Para disposiciones en las que filas y columnas deben alinearse, como una tabla, CSS Grid es más adecuado.

• Menús y grupos de botones: elementos de longitud distinta en una línea, con el mismo espacio gracias a gap. Para enviar un solo elemento al final, dale un margen auto (ejemplo «Barra de navegación»).
• Centrar en horizontal y en vertical: coloca un contenido justo en el centro de la altura del padre, sin calcular posiciones.
• Campo + botón, barra lateral + contenido: un lado conserva un tamaño fijo y el otro se queda con todo el espacio restante (flex: 0 0 120px y flex: 1 1 0).
• Un pie de página pegado abajo: en columna, si das flex-grow al contenido, el pie queda en el borde inferior aunque el contenido sea corto.
• Listas de etiquetas y chips: activa el salto de línea y deja que los elementos fluyan según su longitud. Si todas las filas necesitan columnas del mismo ancho, como en unas tarjetas, valora Grid. Por eso, en el ejemplo «Tarjetas que crecen», las tarjetas de la última línea se hacen más anchas: cada línea reparte su propio espacio.

Cómo se usa

1. Elige un punto de partida. Pulsa una de las 12 disposiciones de ejemplo y cambian a la vez los ajustes del contenedor, los de los elementos y el tamaño del contenedor. En pantallas anchas el escenario se queda fijo arriba al desplazarte, así que puedes pulsar ejemplos y comparar los resultados al instante.
2. Define el contenedor. Elige primero la dirección y el salto de línea, y después cambia la alineación en el eje principal y en el transversal. Los iconos de alineación giran según la dirección actual, de modo que el lado hacia el que se mueven las barras del icono es el lado hacia el que se mueven los elementos.
3. Arrastra el tamaño. Estrecha el contenedor con el tirador de la esquina inferior derecha del escenario para encontrar el punto en que empiezan el salto de línea y el encogimiento. Con el foco en el tirador, las flechas cambian el tamaño de 10 en 10 px, Shift más flecha de 50 en 50 px, y la tecla Inicio ajusta el ancho al escenario.
4. Afina un elemento. Elige un elemento en el escenario o con los botones numerados y cambia su texto, sus valores de flex, el orden, align-self y el margen auto. En la tarjeta de cálculo de tamaños ves cuánto espacio libre recibió ese elemento.
5. Copia. Con «Copiar CSS» y «Copiar HTML» te llevas el código. El código básico solo incluye las propiedades de disposición que difieren del valor predeterminado. Si activas «Incluir decoración de la vista previa», se añaden los mismos tamaños, rellenos y bordes del escenario, y la disposición se ve igual donde la pegues.

Eje principal y eje transversal

El eje principal es la dirección en la que se colocan los elementos, y el transversal es la perpendicular. justify-content mueve los elementos en el eje principal, y align-items, align-self y align-content los mueven en el transversal. En una pantalla con escritura horizontal de izquierda a derecha, las cuatro direcciones son así.

flex-wrap: wrap-reverse intercambia el inicio y el final del eje transversal. Por eso, con row y wrap-reverse las líneas se apilan de abajo arriba, y align-items: flex-start también se pega a la parte inferior de la línea. En documentos de derecha a izquierda (direction: rtl) y en escritura vertical el lado de inicio vuelve a cambiar, así que es fácil equivocarse si siempre lees flex-start como «izquierda».

justify-content reparte el espacio libre

justify-content decide dónde va el espacio que sobra en el eje principal, una vez restados los tamaños de los elementos y los huecos. Si no hay espacio libre, cambiar el valor no mueve nada. La tabla muestra el resultado con tres elementos de 80px sin gap en un ancho interior de 400px, que deja 160px libres.

space-around da a cada elemento el mismo espacio a ambos lados, así que el espacio entre elementos (53,33px) es el doble que el de los extremos (26,67px). space-evenly hace iguales los extremos y los espacios entre elementos. Estos tres valores de distribución pasan a una alineación de reserva cuando el espacio no se puede repartir. CSS Box Alignment fija la de space-between en safe flex-start y la de space-around y space-evenly en safe center. Por eso, con un solo elemento, space-between lo pone al inicio y los otros dos en el centro. Cuando los elementos se desbordan, safe protege el lado de inicio y los tres quedan pegados al inicio (comprobado en Chromium 151).

align-items, align-self y align-content

align-items decide en qué punto del eje transversal se coloca cada elemento dentro de su línea, y align-self cambia ese valor para un solo elemento. El valor predeterminado, stretch, estira al tamaño de la línea los elementos cuyo tamaño transversal es auto. En una disposición horizontal, un elemento con height explícito no se estira. baseline alinea la línea base de la primera línea de texto de elementos con distinto tamaño de letra (ejemplo «Líneas base alineadas»).

align-content trata varias líneas como un bloque y coloca todo el bloque en el eje transversal. El valor predeterminado, normal, se comporta en un contenedor flex como stretch: estira las líneas para llenar el espacio libre. La especificación indica que esta propiedad no tiene efecto en un contenedor flex de una sola línea, así que con flex-wrap: nowrap ningún valor cambia nada. Con wrap sí se aplica, aunque en realidad haya una sola línea. En Chromium 151, con una línea de elementos de 20px en un contenedor de 100px de alto y align-content: center, la línea se quedó arriba con nowrap, y con wrap bajó 40px hasta el centro.

La abreviatura flex: initial, auto, none y 1

flex escribe de una vez flex-grow, flex-shrink y flex-basis. Los cuatro valores habituales que presenta la especificación están en la tabla, y un solo número como flex: 1 deja flex-basis en 0. Las dos columnas de la derecha muestran dos elementos con contenido de 100px y 300px en contenedores de 600px y 300px de ancho interior.

La diferencia entre flex: auto y flex: 1 está en el punto de partida. auto parte del tamaño del contenido (100 y 300) y suma a cada uno la mitad de los 200 libres, así que el elemento largo sigue siendo más ancho. 1 parte de 0 y divide los 600 por la mitad, así que los dos elementos acaban con el mismo ancho. La tabla se calculó con elementos sin relleno ni borde y con un ancho mínimo de contenido lo bastante pequeño. Si una palabra larga hace que el ancho mínimo sea mayor que la parte que le toca, ese elemento se detiene en su ancho mínimo y los demás vuelven a repartirse el espacio restante.

flex-grow es una proporción para repartir el espacio libre

flex-grow no es una proporción de los tamaños finales, sino de cómo se reparte el espacio libre. Estos son los resultados con dos elementos en un ancho interior de 500px.

Con grow 1 : 2, los 300px libres se dividen en 100 y 200, así que los anchos finales son 200 : 300. Para que los anchos finales sean exactamente 1 : 2, deja el tamaño base en 0, como en la última fila (flex: 1 y flex: 2), y procura que los elementos no tengan relleno ni borde y que ningún ancho mínimo de contenido lo impida. Si tienen 30px de relleno y borde, como los del escenario de esta herramienta, parten de esos 30px, así que ni siquiera flex: 1 y flex: 2 quedan exactamente en 1 : 2. Si la suma de grow de los elementos que crecen es menor que 1, la especificación reparte solo esa fracción del espacio libre. 0,25 + 0,25 = 0,5, así que solo se reparte la mitad de los 300px, es decir 150px, y los otros 150px los coloca justify-content.

flex-shrink encoge en proporción al tamaño base

Cuando falta espacio, lo que cede cada elemento se reparte en la proporción de su valor de shrink multiplicado por su tamaño base interior. El tamaño base interior es el tamaño base menos el relleno y el borde. Por eso los elementos grandes se encogen más, y con el mismo shrink no se encogen lo mismo. A continuación faltan 100px en un ancho interior de 300px.

La última fila es box-sizing: border-box con relleno y borde izquierdo y derecho que suman 40px. Como la proporción de encogimiento se fija con los tamaños base interiores, 60 : 260, el resultado difiere del caso sin relleno (75 · 225). La tarjeta de cálculo de tamaños de esta herramienta escribe este cálculo tal cual, por ejemplo «(1 × 60) / 320 de los 100 que faltan». Cuando la suma de shrink es menor que 1 se aplica la misma regla que con grow. En un ancho interior de 300px, dos elementos de 200px con shrink 0,2 cada uno suman 0,4, así que solo se quita el 40% de los 100px que faltan, es decir 40px: quedan en 180 · 180 y los otros 60px se desbordan.

Elementos que no se encogen: min-width: auto

Aunque flex-shrink valga 1, un elemento no se hace más pequeño que el ancho mínimo de su contenido. En un elemento flex que no es un contenedor con desplazamiento, el valor predeterminado auto de min-width (min-height en columna) se calcula como «tamaño mínimo basado en el contenido» (especificación §4.5). Por eso una dirección larga sin puntos donde cortar, un texto con white-space: nowrap o una imagen de gran tamaño original se salen del contenedor. En el ejemplo «Dirección larga que no se encoge», el rayado rojo a la derecha del escenario es la longitud del desborde.

• Si a ese elemento le das min-width: 0, puede hacerse más pequeño que su contenido. Pero el texto no salta de línea por sí solo, así que trata aparte el texto desbordado con overflow-wrap: anywhere o con puntos suspensivos.
• Si pones overflow en hidden o auto, o en cualquier valor distinto de visible, el elemento pasa a ser un contenedor con desplazamiento y su tamaño mínimo automático es 0.
• Si una lista con desplazamiento dentro de una columna no se desplaza y solo crece, ese elemento suele necesitar min-height: 0.
• En español, igual que en inglés, las líneas solo se cortan en los espacios y en los guiones, así que una palabra larga o una URL aumentan el ancho mínimo. Por eso «Dirección» no se parte en el ejemplo. Para cadenas largas usa overflow-wrap: anywhere, o define el atributo lang y usa hyphens: auto para que las palabras puedan cortarse.

Apartar un solo elemento con un margen auto

En una disposición horizontal, si das a un elemento margin-left: auto, ese margen se queda con todo el espacio libre y el elemento se desplaza hacia el final. La especificación dice que el espacio libre positivo se entrega primero a los márgenes auto, antes de que justify-content y align-self alineen nada (§8.1). Por eso, en una línea con un margen auto, cambiar justify-content no mueve nada. El ejemplo «Barra de navegación» da un margen auto al inicio solo al elemento «Entrar», de modo que el resto del menú queda a la izquierda y solo «Entrar» va al extremo derecho. Si pones auto en ambos lados, el elemento queda en el centro del espacio libre. El «Margen auto en el eje principal» de la herramienta escribe en el código el que corresponda entre margin-left, right, top y bottom según la dirección.

Cuando hay gap y espacio libre a la vez

Un contenedor flex determina el espacio en este orden. Primero resta del tamaño interior el gap entre elementos y reparte lo que queda con grow o shrink. Si aún sobra espacio, lo colocan los márgenes auto y después justify-content. La primera línea del cálculo de tamaños, «tamaño interior − huecos − suma de tamaños base = espacio libre», sigue justo este orden. En row, column-gap va entre los elementos de una misma línea y row-gap entre líneas; en column ocurre al revés.

El gap solo aparece entre elementos, nunca entre el borde del contenedor y el primer elemento. El espacio de los bordes se da con el padding del padre. Si se combina con space-between, el espacio visible es mayor que el gap, y en una línea con un solo elemento no hay gap.

order y reverse solo cambian el orden visual

order coloca primero los elementos con valores menores, y los que tienen el mismo valor siguen el orden del HTML. row-reverse y column-reverse también invierten el orden solo en pantalla. La navegación con Tab y los lectores de pantalla siguen el orden del HTML, así que la especificación indica que order se use solo para cambiar el orden visual y no el lógico (§5.4), y que no se use order ni *-reverse en lugar de un orden correcto en el código fuente (§5). En el escenario de esta herramienta, las flechas del teclado también recorren los elementos en el orden del HTML (el de los números), no por su posición en pantalla.

Compatibilidad con navegadores

Las cifras de la tabla son las primeras versiones compatibles que indican los datos de compatibilidad de MDN. Si necesitas dar soporte a navegadores antiguos que no admiten gap en la disposición flex, crea el espacio con el margin de los elementos.

Errores frecuentes

• El centrado vertical no funciona. El padre mide lo mismo que su contenido y no hay espacio libre en el eje transversal. Dale al padre un height o un min-height.
• justify-content no mueve nada en column. El eje principal de una columna es la altura, así que el padre necesita una altura definida para que haya espacio libre.
• Pusiste flex: 1 pero los anchos son distintos. Algún elemento tiene un ancho mínimo de contenido, por una palabra larga o una imagen, mayor que la parte que le toca. Valora min-width: 0 en ese elemento.
• Solo se ensanchan las tarjetas de la última línea. Cada línea reparte su espacio libre por separado. Para igualar el ancho de las columnas, usa Grid o deja grow en 0.
• Quieres alinear a los nietos. display: flex convierte en elementos flex solo a los hijos directos. Para alinear los elementos interiores, da display: flex también a su padre.
• Con center se corta el principio del desborde. Cuando los elementos se desbordan, center se sale por ambos lados y el lado de inicio no se alcanza ni desplazándose. En Chromium 151, con 300px de contenido en un contenedor de 200px, el primer elemento sobresalió 50px por delante, y con justify-content: safe center quedó pegado al inicio.
• Cambiaste el orden con order pero el orden de Tab sigue igual. Es lo normal. Si también debe cambiar el orden de lectura, corrige el orden del HTML.

Límites y advertencias

• El escenario solo muestra la escritura horizontal de izquierda a derecha. En documentos rtl o de escritura vertical el lado de inicio es otro.
• Cada elemento solo admite un fragmento de texto. En páginas reales con imágenes, hijos de ancho fijo o flex anidado, el ancho mínimo sale distinto.
• El cálculo de tamaños recalcula el §9.7 de la especificación con los tamaños de contenido (max-content y min-content) medidos en el navegador actual. Si una línea se desvía en más de 1px, muestra para esa línea el valor del navegador y lo avisa aparte.
• Cuando flex-basis es menor que el relleno + el borde (por ejemplo 0 con border-box), la nota de la especificación describe el tamaño base exterior como 0. Chromium 151 empieza el cálculo desde el relleno + el borde, y esta herramienta usa los valores que coinciden con ese resultado.
• No se pueden ajustar los tamaños máximos (max-width, max-height) ni los márgenes auto del eje transversal con align-self.
• El código copiado no genera media queries. Las reglas que cambian la dirección según el ancho de pantalla hay que escribirlas aparte.
• Al copiar el enlace, el texto de los elementos también queda en la dirección. No escribas texto que no quieras que vean otras personas.

Fecha de referencia W3C CSS Flexible Box Layout Module Level 1 (Candidate Recommendation Draft del 2025-10-14), CSS Box Alignment Module Level 3 (Working Draft del 2026-10-08) y los datos de compatibilidad de MDN se contrastaron con los originales el 2026-10-21. Las cifras de las tablas se obtuvieron con el núcleo de cálculo de esta herramienta, y los resultados de la alineación de reserva, de align-content y del mínimo del tamaño base se midieron en Chromium 151.

Fuentes

• 01W3C: CSS Flexible Box Layout Module Level 1Candidate Recommendation Draft 2025-10-14. §4.5 tamaño mínimo automático, §5 y §5.4 orden y accesibilidad, §7.1.1 valores de la palabra clave flex (initial, auto, none, un número), §8.1 márgenes auto, §8.4 align-content, §9.3 reunir las líneas, §9.7 resolución de longitudes flexibles (shrink × tamaño base interior, suma de grow < 1)
• 02W3C: CSS Box Alignment Module Level 3Working Draft 2026-10-08. §4.3 valores de distribución y alineación de reserva (space-between = safe flex-start, space-around y space-evenly = safe center), §4.4 safe y unsafe, §5.1.3 comportamiento de normal en contenedores flex
• 03MDN: Basic concepts of flexboxEje principal y transversal, líneas de inicio y de final, comportamiento predeterminado de los elementos flex
• 04MDN: flexTabla de compatibilidad: sin prefijo en Chrome 29, Firefox 22 y Safari 9
• 05MDN: flex-basisTabla de compatibilidad: content en Chrome 94, Firefox 61 y Safari 15.4; min-content y max-content en Chrome 94, Firefox 66 y Safari 16
• 06MDN: gapTabla de compatibilidad: en la disposición flex, Chrome 84, Firefox 63 y Safari 14.1
• 07MDN: orderAdvertencia de accesibilidad: el orden visual y el de lectura se separan; tabla de compatibilidad: Chrome 29, Firefox 20 y Safari 9

Preguntas frecuentes

Herramientas relacionadas