Practicar Flexbox interactivamente con overlay de ejes

¿Qué hace el Flexbox Playground?

El playground construye diseños Flexbox de forma visual. A la izquierda están los campos para las seis propiedades del contenedor — flex-direction, justify-content, align-items, align-content, flex-wrap, gap — y a la derecha la vista previa en vivo con ítems flex reales que aplican sus ajustes al instante. Si pulsa sobre un ítem, se abren los overrides por ítem: order, flex-grow, flex-shrink, flex-basis, align-self.

Sobre la vista previa, un deslizador de ancho de contenedor controla el ancho de la escena de 240 px a 1200 px. Así prueba en segundos cómo se comporta el mismo diseño en una barra lateral estrecha frente a un área principal ancha — sin redimensionar la ventana del navegador ni abrir DevTools. Es la aproximación más rápida a las container queries sin regla @container real.

¿Por qué un overlay dibuja los ejes?

El error más frecuente de principiante en Flexbox es el cambio de eje. Si pone flex-direction: row, el eje principal corre horizontal y el secundario vertical. En cuanto cambia a column, los dos se intercambian. De golpe, justify-content controla la alineación vertical y align-items la horizontal — y un diseño que funcionaba se ve completamente distinto. El overlay de ejes dibuja directamente el eje principal y el secundario actuales en la vista previa, con flechas y etiquetas. Ve al instante qué propiedad controla cada dirección.

En la mayoría de los playgrounds de la competencia falta este overlay. Resultado: los desarrolladores prueban valores de justify-content al azar porque no ven que el eje pasa a la vertical en column. Con los ejes a la vista, el ensayo y error se vuelve ajuste dirigido. Se puede apagar arriba a la derecha mediante una casilla si el overlay molesta.

¿Cómo se comportan flex-grow, flex-shrink y flex-basis?

Estas tres propiedades forman el atajo flex y deciden cómo los ítems reparten o ceden espacio.

Propiedad	Significado	Por defecto
flex-grow	Con qué agresividad un ítem reclama el espacio sobrante. 0 = nada, 1 = se reparte el resto, 2 = el doble que 1.	0
flex-shrink	Con qué agresividad un ítem se encoge cuando el espacio escasea. 0 = nunca por debajo de la base, 1 = se reparte la carencia.	1
flex-basis	Tamaño ideal antes de repartir o quitar. auto = tamaño del contenido, 0 = controlado totalmente por grow.	auto

Trampa frecuente: flex-basis: 0 con flex-grow: 1 (en corto flex: 1) reparte el espacio del contenedor de forma uniforme, pero ítems con contenido largo pueden desbordar igualmente. Razón: los ítems llevan por defecto min-width: auto, así que nunca menores que el contenido mínimo intrínseco. Arreglo: poner min-width: 0 en el ítem. El playground avisa de esta combinación automáticamente.

¿Cuándo se elige Flexbox y cuándo CSS Grid?

Flexbox y CSS Grid son complementarios, no competidores. Regla práctica: Flexbox para un eje, Grid para dos.

Flexbox encaja en:

• Barras de navegación, barras de herramientas de header, barras de pestañas
• Tarjetas en una fila con la misma altura
• Menús laterales verticales
• Contenido interior de modal centrado
• Pie pegajoso (contenedor flex-direction: column, main con flex-grow: 1)
• Diseños de formulario con label a la izquierda / entrada a la derecha

Grid encaja mejor en:

• Diseños de página completa con sidebar, header, main, footer
• Rejillas de tarjetas con separaciones iguales en ambas direcciones
• Diseños tipo revista con áreas atravesando
• Estructuras tipo tabla sin <table>
• Holy-Grail layouts con columnas exteriores fijas

En la práctica se combinan los dos: Grid para el esqueleto exterior, Flexbox para los componentes interiores. El playground genera exclusivamente código Flexbox — para Grid hay una herramienta hermana en el backlog.

¿Cómo se escribe Flexbox como utility-classes de Tailwind?

Tailwind ha usado los mismos nombres de clase Flexbox desde la v3.0 (diciembre de 2021) — las utilities grow, shrink y basis-… son, por tanto, idénticas en v3 y v4. Quien vea en un codebase antiguo flex-grow, flex-shrink-0 o flex-basis-[120px] mira restos de Tailwind v2 o una lista de clases hecha a mano — nunca fue oficial en v3.

Concepto	Tailwind v3 / v4	CSS puro
Crecer	grow	flex-grow: 1
Crecer con factor	grow-[2]	flex-grow: 2
No encoger	shrink-0	flex-shrink: 0
Encoger con factor	shrink-[2]	flex-shrink: 2
Valor de base	basis-[120px]	flex-basis: 120px
Base auto	basis-auto	flex-basis: auto

El playground ofrece igualmente las dos pestañas (tailwind-v3 y tailwind-v4) para que auditorías de migración, snippets de IDE y code reviewers puedan pegar la salida 1:1 en ambos codebases. En el fondo, ambas pestañas emiten los mismos nombres de clase — la diferencia entre v3 y v4 no está en las utilities Flexbox, sino en la configuración CSS-first (@theme), el motor Lightning CSS y las utilities de degradado renombradas (bg-linear-to-* en lugar de bg-gradient-to-*).

¿Por qué a veces no pasa nada al ajustar?

Flexbox tiene algunas interacciones silenciosas — cambia una propiedad y no cambia nada. Causas frecuentes:

align-content sin wrap. align-content ordena líneas flex a lo largo del eje secundario. Pero solo hay líneas si flex-wrap: wrap o wrap-reverse está activo. Con nowrap hay exactamente una línea — align-content no tiene nada que hacer. El playground lo señala en el panel de avisos.

justify-self en un ítem. Esta propiedad existe en CSS Grid, pero NO en Flexbox. Para mover un único ítem a lo largo del eje principal, se usa margin-left: auto en el ítem — el truco empuja el ítem y todos los siguientes a la derecha (con flex-direction: row). Así nace el clásico patrón «logo a la izquierda, menú a la derecha».

flex-basis sin flex-grow. Si pone flex-basis: 0, todos los ítems son teóricamente de cero píxeles — pero no crecen, porque flex-grow: 0 es el valor por defecto. Los ítems colapsan a min-content. Arreglo: añadir flex-grow: 1 o usar el atajo flex: 1.

min-width: auto bloquea el encogimiento. Los ítems tienen por defecto min-width: auto — nunca son más pequeños que su contenido mínimo intrínseco. Con textos largos o imágenes anchas, el contenido revienta el layout. Arreglo: min-width: 0 en el ítem.

¿Qué casos de uso cubren los presets?

Cinco diseños del mundo real con un consejo de aprendizaje cada uno:

Barra de navegación. Contenedor en flex-direction: row y gap: 16px. El primer ítem (logo) recibe flex-grow: 1 para empujar todos los demás a la derecha. Consejo: en lugar del inexistente justify-self, se usa margin-left: auto en el último elemento antes del grupo del menú.

Rejilla de tarjetas. flex-wrap: wrap más gap: 16px deja saltar las tarjetas cuando no hay espacio. Los ítems con flex-basis: 200px y flex-grow: 1 llenan cada fila de manera uniforme. Consejo: min-width: 0 en tarjetas con contenido largo, si no revientan el layout.

Holy-Grail layout. Tres columnas con sidebar fija a la izquierda, main fluido, sidebar fija a la derecha. Las columnas exteriores reciben flex: 0 0 200px, main flex: 1 1 auto. Consejo: al pasar a flex-direction: column para móvil, los ejes vuelcan — la sidebar se vuelve arriba/abajo, ya no izquierda/derecha.

Footer pegajoso. Contenedor en flex-direction: column que llena al menos la altura del viewport. El elemento main recibe flex-grow: 1, el footer cuelga automáticamente abajo. Consejo: no hace falta position: absolute — Flexbox lo hace robusto y sin conflictos de z-index.

Centrado en ambos ejes. El clásico «hello world» de Flexbox. justify-content: center más align-items: center en el contenedor y listo. Consejo: en el ítem centrado NO hace falta propiedad adicional — el contenedor lo hace todo.

Preguntas frecuentes

¿Cómo funciona Flexbox en CSS?

Flexbox es un modelo de diseño unidimensional. Un elemento padre con display: flex se convierte en contenedor flex; sus hijos directos en ítems flex, dispuestos a lo largo de un eje principal. El eje principal lo establece flex-direction; el eje secundario es perpendicular.

¿Qué diferencia hay entre Flexbox y CSS Grid?

Flexbox es unidimensional — los ítems van en una fila o en una columna. CSS Grid es bidimensional y define filas Y columnas a la vez. Regla práctica: componentes con Flexbox, diseños de página completa con Grid.

¿Cuándo usar Flexbox en lugar de Grid?

Siempre que el contenido deba fluir a lo largo de un eje: barras de navegación, barras de herramientas, tarjetas en fila, listas verticales de sidebar, contenido interior de modal centrado. En cuanto quiera controlar a la vez filas Y columnas, Grid es la herramienta adecuada.

¿Cómo se centran ítems vertical y horizontalmente con Flexbox?

En el contenedor, poner display: flex; justify-content: center; align-items: center;. Funciona con cualquier número de ítems y sin altura explícita en el ítem. Atención: align-items necesita altura en el contenedor; si no, no hay eje secundario donde centrar.

¿Por qué align-content y flex-wrap funcionan juntos?

align-content ordena líneas flex completas a lo largo del eje secundario — y solo hay líneas si hay salto. Con flex-wrap: nowrap existe una sola línea, así que align-content no actúa. En cuanto flex-wrap: wrap está activo, la propiedad controla el espacio entre líneas.

¿Qué significan flex-grow, flex-shrink y flex-basis?

flex-basis es el tamaño ideal antes de repartir o quitar espacio. flex-grow define con qué agresividad un ítem reclama el espacio sobrante (0 = nada, 1 = se reparte el resto, 2 = el doble que 1). flex-shrink hace lo contrario cuando el espacio escasea. El atajo flex: 1 1 0 fija los tres.

¿En qué se diferencian las clases Flexbox de Tailwind v4 frente a v3?

Tailwind v4 eliminó el prefijo flex- en las utilities de ítem: grow, shrink-0, basis-[120px] sustituyen a flex-grow, flex-shrink-0, flex-basis-[120px]. Las utilities de contenedor (flex, flex-col, justify-center, items-center) quedan igual. El playground genera ambas variantes en paralelo.

¿La herramienta guarda mis diseños?

No. Todos los ajustes quedan en la pestaña del navegador — sin servidor, sin cuenta, sin cookies. Al recargar, el playground arranca con los valores por defecto. Quien quiera guardar un diseño copia la salida de código en su propia hoja de estilos.

¿Qué herramientas CSS están relacionadas?

Otras herramientas para CSS authoring visual:

• Generador de degradados CSS — degradados lineales, radiales y cónicos con OKLCH y salida Tailwind v4.
• Generador de box-shadow — sombras multicapa con presets Material 3 Elevation.
• Formateador CSS — formatear CSS crudo o minificado de forma limpia.
• Verificador de contraste — comprobar el contraste WCAG-AAA entre dos colores.