Generador CSS Flexbox

Cómo usar

1. Define las propiedades del contenedor: configura el contenedor flex, flex-direction, justify-content, align-items, flex-wrap y gap.
2. Añade y configura los elementos flex: añade elementos hijos y define flex-grow, flex-shrink, flex-basis, align-self y order individualmente.
3. Copia el CSS: obtén el CSS completo para el contenedor y los elementos, listo para usar en tu proyecto.

¿Por qué usar el generador Flexbox?

Flexbox es la herramienta esencial para la maquetación CSS unidimensional, alinear elementos en fila o en columna con controles potentes de distribución y alineación. Pero las propiedades son numerosas y sus interacciones complejas: justify-content frente a align-items, flex-grow frente a flex-basis, eje principal frente a eje transversal. Este generador interactivo ofrece retroalimentación visual instantánea cuando modificas cada propiedad, lo que lo convierte en la forma más rápida de aprender Flexbox y de obtener el CSS adecuado a tu diseño.

Funcionalidades

• Vista previa interactiva: arrastra los elementos flex y activa las propiedades para ver los cambios en tiempo real.
• Todas las propiedades del contenedor: flex-direction, flex-wrap, justify-content, align-items, align-content y gap.
• Control por elemento: define flex-grow, flex-shrink, flex-basis, align-self y order individualmente para cada elemento.
• Indicadores de eje visuales: el eje principal y el eje transversal se resaltan para reforzar el modelo conceptual.
• Salida CSS: CSS completo, listo para copiar, para el contenedor y todos los elementos configurados.

Preguntas frecuentes

¿Cuál es la diferencia entre justify-content y align-items?

justify-content distribuye los elementos a lo largo del eje principal (horizontal por defecto). align-items alinea los elementos a lo largo del eje transversal (vertical por defecto). Cuando flex-direction es column, los ejes se invierten, justify-content pasa a vertical y align-items a horizontal.

¿Cuándo usar Flexbox o CSS Grid?

Usa Flexbox para diseños unidimensionales, una fila de botones, una barra de navegación, una lista de tarjetas que deben saltar a la siguiente línea. Usa CSS Grid para diseños bidimensionales en los que debas controlar filas y columnas a la vez, como un diseño completo o una cuadrícula de tarjetas compleja.

¿Qué significa flex: 1?

flex: 1 es un atajo para flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Le indica al elemento que crezca para llenar el espacio disponible, que se reduzca si es necesario y que parta de cero antes de repartir el espacio. Todos los elementos con flex: 1 se reparten el espacio por igual.

Lo que Flexbox realmente hace

Flexbox (Flexible Box Layout) es un modelo de diseño CSS diseñado para distribuir espacio y alinear elementos en una dirección unidimensional: ya sea una fila o una columna. Introduce dos conceptos centrales que determinan cómo se comporta todo: el eje principal (la dirección primaria en la que fluyen los elementos, horizontal por defecto) y el eje transversal (perpendicular al principal, vertical por defecto). Una vez que internalizas principal vs transversal, cada propiedad de Flexbox se asigna a uno de ellos: justify-content trabaja en el eje principal, align-items trabaja en el eje transversal, flex-direction intercambia qué eje es cuál.

Flexbox resolvió un conjunto de problemas de diseño que plagaron a los desarrolladores web desde 1998 hasta 2014. Antes de Flexbox, centrar un elemento verticalmente requería hacks (display: table-cell, márgenes negativos, position: absolute con transformaciones translate). Las columnas de igual altura requerían la técnica de «columnas falsas» con imágenes de fondo. Los footers pegajosos necesitaban cálculos precisos en píxeles. Flexbox hizo todos estos triviales: una declaración de una línea reemplaza décadas de soluciones CSS. La compensación es que Flexbox es unidimensional; para diseños bidimensionales (fila Y columna simultáneamente), CSS Grid (lanzado en 2017) es la mejor herramienta.

Las propiedades de Flexbox se dividen claramente en dos grupos: propiedades del contenedor (aplicadas al padre: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) y propiedades del elemento (aplicadas a los hijos: flex-grow, flex-shrink, flex-basis, align-self, order). Las propiedades del contenedor controlan patrones de diseño; las propiedades del elemento controlan excepciones individuales. Este generador muestra ambos conjuntos para que puedas experimentar cómo interactúan sin escribir código.

Cómo funciona esta herramienta tras bambalinas

La vista previa en vivo es un contenedor flex con elementos hijos de ejemplo. A medida que cambias las propiedades del contenedor (flex-direction, justify-content, etc.) a través de menús desplegables y entradas, JavaScript actualiza el estilo inline del contenedor de vista previa, y el navegador vuelve a renderizar el diseño. La vista previa es la implementación real de Flexbox del navegador, no una simulación de JavaScript: ves exactamente lo que tu CSS producirá en una página real.

Los controles por elemento te permiten ajustar cada hijo individualmente. Puedes agregar o eliminar elementos, establecer sus valores de flex-grow, flex-shrink, flex-basis, align-self y order, y ver cómo el contenedor redistribuye el espacio en consecuencia. Los indicadores visuales de eje muestran los ejes principal y transversal para la configuración actual, reforzando el modelo mental. Las propiedades son CSS real que puedes copiar directamente a tu hoja de estilos, sin necesidad de transpilación o prefijos de framework.

El panel de CSS generado se actualiza con cada interacción, produciendo dos reglas CSS: una para el contenedor (con las propiedades flex elegidas) y una para los elementos. Haz clic en Copiar CSS y las reglas se escriben en tu portapapeles. La herramienta misma nunca hace solicitudes de red; el renderizado de la vista previa, la generación de código y la escritura al portapapeles ocurren todo en JavaScript en tu dispositivo. Refresca la página y tu configuración se ha ido a menos que hayas copiado el CSS primero.

Breve historia de Flexbox

• Caos de diseño CSS 2.1, 1998 a 2008.Antes de Flexbox, los desarrolladores web usaban float: left con hacks de clearfix, display: inline-block con bugs de espacios en blanco, o display: table con trucos de table-cell para el diseño. El centrado vertical requería vertical-align en table-cells, trucos de margen negativo o posicionamiento absoluto. Las columnas iguales requerían JavaScript. La comunidad web genera miles de publicaciones de blog sobre soluciones «cómo hacer X con CSS».
• Primer borrador de Flexible Box, 2009.El W3C CSS Working Group publica el primer Working Draft del CSS Flexible Box Layout Module en julio de 2009, con tres sintaxis evolucionando durante los próximos cinco años: la sintaxis original box-* (rápidamente obsoleta), la sintaxis intermedia flexbox de 2011 (aún visible en código legado de IE 10), y la sintaxis final flex que usamos hoy.
• El soporte del navegador se estabiliza, 2014.Chrome 29, Firefox 28, Safari 9 e IE 11 todos envían Flexbox funcionando para 2014, con IE 11 manteniendo casos extremos con bugs. La transición de «Flexbox es el futuro» a «Flexbox es el presente» ocurre en 2014-2015 a medida que los sitios de producción lo adoptan para diseños principales. El «Holy Grail Layout» (encabezado, pie de página, dos barras laterales, contenido principal) se vuelve trivial.
• «A Complete Guide to Flexbox» de Chris Coyier, 2013.CSS-Tricks publica la guía completa de Flexbox de Chris Coyier (abril de 2013), que se convierte en la referencia canónica. Para 2016, la guía está entre los principales resultados para cualquier pregunta de Flexbox y está traducida a docenas de idiomas. Acelera dramáticamente la adopción de Flexbox.
• CSS Grid llega como complemento, 2017.CSS Grid Layout se envía en Chrome 57, Firefox 52 y Safari 10.1 (marzo de 2017). Lejos de reemplazar Flexbox, Grid lo complementa: Flexbox sobresale en diseños unidimensionales de fila/columna, Grid sobresale en diseños bidimensionales. Los diseños modernos típicamente usan ambos: Grid para estructura a nivel de página, Flexbox para arreglos internos de componentes (elementos de navegación, grupos de botones, contenido de tarjeta).
• La propiedad gap y subgrid aterrizan, 2020 a 2024.La propiedad gap (originalmente solo para Grid) se vuelve compatible con Flexbox en todos los principales navegadores para Safari 14.1 (abril de 2021). La sintaxis más limpia gap: 1rem reemplaza los patrones más antiguos de «margen en cada hijo excepto el último». CSS Subgrid (2023+) permite que las cuadrículas anidadas se alineen con las pistas de cuadrícula padre, útil para diseños de sistemas de componentes.

Flujos del mundo real

• Barras de navegación.Una navegación horizontal con logo a la izquierda y enlaces a la derecha es el caso de uso canónico de Flexbox. display: flex; justify-content: space-between; align-items: center; en el contenedor de nav, y ya está. Agrega gap: 1.5rem para el espaciado entre enlaces. Este CSS de 4 líneas reemplaza lo que solía requerir floats, clearfix y matemáticas de margen al píxel.
• Centrado vertical y horizontal.La pregunta clásica «¿cómo centro este div?» tiene una respuesta de Flexbox: display: flex; justify-content: center; align-items: center; en el padre. Funciona independientemente del tamaño intrínseco del hijo, independientemente de la altura del padre, independientemente de los cambios de contenido dinámico. Esta es la mejora individual más grande de calidad de vida que Flexbox trajo al desarrollo web.
• Diseños de lista de tarjetas con envoltura.Una fila de tarjetas que se envuelve a múltiples filas en pantallas estrechas: display: flex; flex-wrap: wrap; gap: 1rem; en el contenedor, y flex: 1 1 250px en cada tarjeta. Las tarjetas crecen para llenar el espacio disponible, se reducen hasta 250px mínimo, y se envuelven a nuevas filas cuando 250px no encaja. Diseño responsive sin media queries.
• Filas de formulario con entradas etiquetadas.Los formularios a menudo necesitan etiquetas y entradas alineadas: display: flex; gap: 0.5rem; en la fila, flex: 0 0 120px en la etiqueta (ancho fijo de 120px), flex: 1 en la entrada (llena el espacio restante). Redimensionar el contenedor del formulario mantiene la etiqueta fija y estira la entrada. Más fácil que CSS Grid para filas de formulario de dos columnas.
• Pies de página pegajosos.Hacer que el pie de página se pegue al fondo del viewport cuando el contenido es corto, pero siga el contenido cuando es largo: body { display: flex; flex-direction: column; min-height: 100vh; } con main { flex: 1 } empuja el pie de página hacia abajo. El problema clásico del «pie de página pegajoso» resuelto en tres declaraciones CSS, reemplazando las soluciones de margen negativo de la década de 2010.
• Grupos de etiquetas e insignias.Listas de etiquetas, chips o insignias que deberían fluir horizontalmente y envolverse a nuevas líneas: display: flex; flex-wrap: wrap; gap: 0.5rem;. Cada etiqueta se dimensiona a sí misma, y el contenedor maneja el arreglo. Muy usado en UIs de filtrado, etiquetado de contenido, interfaces de búsqueda. Combina bien con el selector :has() para estilo dependiente del estado.

Trampas comunes y lo que significan

• La trampa min-width: auto.Los elementos flex tienen un implícito min-width: auto (o min-height: auto para direcciones de columna) que les impide reducirse por debajo del tamaño mínimo intrínseco de su contenido. Esto hace que los patrones overflow: hidden y de truncamiento de texto fallen inesperadamente dentro de contenedores flex. Arregla: establecer explícitamente min-width: 0 en el elemento flex problemático. Esta es la causa más común de «¿por qué mi diseño flex está roto?».
• Confusión flex-basis vs width.flex-basis es el tamaño inicial de un elemento flex a lo largo del eje principal, antes de los cálculos de crecimiento/reducción. width (o height para direcciones de columna) es el tamaño CSS regular. Cuando ambos están establecidos, flex-basis gana. La abreviatura flex: 1 1 200px establece flex-basis en 200px. Para la mayoría de los casos, prefiere flex-basis sobre width dentro de contenedores flex por claridad.
• Soporte de gap en navegadores más antiguos.La propiedad gap era originalmente solo para Grid y llegó a Flexbox más recientemente: Safari 14.1 (abril de 2021), y antes en Chrome/Firefox. Para proyectos que soportan Safari antiguo (o WebView antiguo en aplicaciones iOS), proporciona fallbacks usando márgenes en los hijos. La mayoría de los proyectos modernos pueden usar gap con seguridad; verifica tus objetivos específicos de soporte de navegador.
• El flex-shrink predeterminado puede causar dimensionamiento inesperado.Los elementos flex por defecto a flex-shrink: 1, lo que significa que pueden reducirse por debajo de su ancho declarado si el contenedor es demasiado estrecho. Para mantener un elemento en su ancho declarado independientemente del espacio disponible, establece flex-shrink: 0. Común con barras laterales que deberían permanecer en 250px de ancho incluso cuando el área de contenido principal las empuja: flex: 0 0 250px en lugar de flex-basis: 250px.
• Flex-basis porcentual es relativo al contenedor.flex-basis: 50% significa «50% del tamaño del eje principal del contenedor flex». Esto funciona para diseños típicos pero interactúa de manera extraña con flex-wrap: si el contenedor mismo tiene un tamaño de eje principal basado en porcentaje en un contexto flex anidado, las matemáticas se componen. Cuando dudes, usa valores de píxeles o min()/max()/clamp() para flex-basis en lugar de porcentajes.
• El Flexbox de IE 11 tiene casos extremos con bugs.Internet Explorer 11 (retirado en junio de 2022) implementó Flexbox con varios bugs: min-height no respetado, contenedores flex anidados rotos, flex: 1 a veces tratando flex-basis como 0px en lugar de 0%, la abreviatura «flex de dos valores» manejada inconsistentemente. Para proyectos que ya no soportan IE, ignora. Para software empresarial legado, prueba a fondo o usa enfoques de diseño alternativos.

Privacidad: todo se ejecuta en tu navegador

Las herramientas de aprendizaje y diseño CSS vienen en dos sabores: páginas HTML simples ejecutando JavaScript del lado del cliente (privadas, rápidas, sin configuración) y editores en la nube con proyectos guardados (colaborativos pero con compensaciones de privacidad). Esta herramienta es del primer tipo. Tus selecciones de propiedad, tus configuraciones de elementos, tu CSS generado: todo permanece en tu sesión del navegador. Refresca la página y el estado se va a menos que hayas copiado el CSS primero.

Los riesgos de privacidad son bajos aquí porque las configuraciones de Flexbox raramente contienen información sensible. Aun así, la falta de analíticas importa: puedes experimentar libremente sin que tu proceso de prueba y error sea registrado. Particularmente útil en entornos de aula o capacitación corporativa donde hacer que los estudiantes o aprendices registren cuentas en plataformas de terceros es un punto de fricción. La herramienta es una sola página estática sin backend, utilizable en cualquier navegador, incluidas máquinas empresariales bloqueadas.

Cuándo otra herramienta es la opción correcta

• CSS Grid para diseños bidimensionales.Flexbox es unidimensional; si necesitas alinear elementos tanto en filas como en columnas simultáneamente (por ejemplo, un diseño estilo revista con tarjetas de tamaño mixto), CSS Grid está dramáticamente mejor adaptado. Usa nuestro CSS Grid Generator para ese tipo de trabajo. Los dos funcionan muy bien juntos: Grid para estructura a nivel de página, Flexbox para arreglos internos de componentes.
• Tablas HTML para datos tabulares.Si tus datos son realmente una tabla (filas representando registros, columnas representando campos), usa un elemento <table> real con <tr> y <td>. Las tablas proporcionan significado semántico a los lectores de pantalla, encabezados ordenables y alineación incorporada. Flexbox/Grid para tablas es un antipatrón de la era 2010; las pautas modernas de accesibilidad recomiendan explícitamente tablas HTML semánticas para datos tabulares.
• position: absolute para overlays y tooltips.Los overlays modales, tooltips, menús desplegables y elementos UI flotantes similares funcionan mejor con position: absolute o position: fixed en lugar de Flexbox. Flex/Grid gestionan el flujo de diseño; el posicionamiento absoluto saca elementos del flujo por completo. Combínalos: Flexbox para el diseño principal de la página, posicionamiento absoluto para el modal que la cubre.
• CSS Subgrid para alineación anidada.Cuando los diseños anidados necesitan alinearse con la cuadrícula del padre (por ejemplo, títulos de tarjetas todos alineándose a través de una cuadrícula de tarjetas), CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) es más apropiado que Flexbox anidado. Subgrid permite que los hijos hereden pistas de cuadrícula del padre, asegurando alineación perfecta a través de estructuras anidadas. Vale la pena aprender para trabajo de componentes de sistemas de diseño.

Más preguntas frecuentes

¿Qué significa exactamente la abreviatura flex?

La abreviatura flex establece tres propiedades a la vez: flex: <grow> <shrink> <basis>. Valores comunes: flex: 1 (1, 1, 0%) para elementos de distribución igual, flex: 0 0 auto para elementos de tamaño fijo, flex: 1 1 250px para elementos que crecen/reducen desde un punto de inicio de 250px. La abreviatura tiene valores iniciales especiales cuando solo se proporcionan uno o dos valores; la forma explícita de tres valores evita sorpresas.

¿Cómo hago que los elementos se envuelvan a múltiples filas?

Establece flex-wrap: wrap en el contenedor. Los elementos se desbordan a una nueva línea cuando no encajan. Combina con flex-basis en los elementos para controlar cuántos encajan por fila: flex: 1 1 200px crea una cuadrícula responsive donde los elementos son al menos 200px, crecen para llenar el espacio restante y se envuelven a nuevas filas en pantallas estrechas. La propiedad gap del contenedor maneja el espaciado entre filas y elementos envueltos.

¿Puedo invertir el orden de los elementos flex?

Sí, varias formas. A nivel de contenedor: flex-direction: row-reverse (o column-reverse) invierte todos los elementos en orden. A nivel de elemento: la propiedad order asigna pesos numéricos; los elementos con números más bajos aparecen primero. El orden predeterminado es 0; establecer order: -1 en un elemento lo mueve al frente. Nota de accesibilidad: el reordenamiento visual no afecta el orden de tabulación ni el orden de lectura del lector de pantalla, lo que puede confundir a los usuarios de teclado y tecnología de asistencia. Usar con moderación.

¿Cuál es la diferencia entre align-items y align-content?

align-items alinea elementos dentro de su fila (o columna) a lo largo del eje transversal. align-content alinea las filas (o columnas) mismas dentro del contenedor, solo significativo cuando hay múltiples líneas envueltas. Si flex-wrap está establecido en nowrap (predeterminado), align-content no tiene efecto porque solo hay una línea. Usa align-items para alineación de una sola línea, align-content para alineación multi-línea.

¿Cómo centro un solo elemento con Flexbox?

La respuesta clásica: display: flex; justify-content: center; align-items: center; en el contenedor padre. Esto centra al hijo tanto horizontal como verticalmente. Solo horizontal: usar solo justify-content: center. Solo vertical: usar solo align-items: center. Si necesitas centrar dentro de un padre de altura desconocida, agrega min-height: 100vh al padre para que tenga espacio vertical para centrar. El patrón completo reemplaza 20 años de soluciones de centrado CSS.

¿Por qué mi truncamiento de texto no funciona en un contenedor flex?

Debido al valor predeterminado min-width: auto en los elementos flex. Text-overflow: ellipsis requiere que el elemento se desborde realmente de su contenedor; con el ancho mínimo predeterminado establecido al tamaño intrínseco del contenido, el elemento nunca se desborda. Arregla: agrega min-width: 0 al elemento flex que contiene el texto a truncar. Este es el bug de Flexbox más común en las respuestas de Stack Overflow: buscar «flex text-overflow ellipsis not working» devuelve miles de versiones de esta respuesta exacta.