Zona de pruebas de CSS Flexbox

El CSS Flexbox Playground es una herramienta en línea gratuita para experimentar visualmente con las propiedades de contenedores e ítems de flexbox. Genera salida en CSS, Tailwind y HTML con vista previa en vivo y ajustes predefinidos para diseños comunes. Funciona por completo en tu navegador, sin instalación ni registro.

display:flex es un contenedor flex a nivel de bloque que ocupa todo el ancho del padre. inline-flex es a nivel de línea y solo ocupa el ancho de su contenido, fluyendo con el texto que lo rodea.

flex-basis establece el tamaño inicial antes de distribuir el espacio libre. flex-grow define cómo se reparte el espacio libre sobrante entre los ítems.

Padre: display:flex + justify-content:center + align-items:center. El ajuste predefinido Centrado aplica exactamente esta configuración.

Sí, el CSS Flexbox Playground es 100% gratis, sin registro, sin tarifas ocultas y sin límites de uso. Todo el procesamiento se realiza localmente en tu navegador, garantizando una privacidad total.

Por supuesto. El CSS Flexbox Playground procesa todo en el lado del cliente, dentro de tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece privado en tu dispositivo en todo momento.

Sí, el CSS Flexbox Playground es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita ninguna cuenta ni registro. Simplemente abre el CSS Flexbox Playground en tu navegador y empieza a usarlo de inmediato. No hay muros de registro ni restricciones de uso.

El CSS Flexbox Playground admite una amplia gama de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones disponibles.

El CSS Flexbox Playground funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

Estas dos propiedades mueven los elementos en ejes opuestos. justify-content posiciona los elementos a lo largo del eje principal — la dirección definida por flex-direction —, así que controla el espaciado horizontal en una fila y el vertical en una columna. align-items posiciona los elementos a lo largo del eje transversal, la dirección perpendicular, así que se encarga de la alineación vertical en una fila y horizontal en una columna. Por eso, al cambiar flex-direction de row a column, parece que ambas propiedades intercambian su función. justify-content ofrece valores como flex-start, center, space-between, space-around y space-evenly, mientras que align-items ofrece stretch, flex-start, flex-end, center y baseline. Una forma simple de recordarlo: justify reparte los elementos a lo largo de la línea, align los posiciona arriba y abajo dentro de ella. En este playground puedes activar cada propiedad de forma independiente y ver cómo la vista previa punteada se reorganiza al instante, lo que deja clara la distinción entre eje principal y eje transversal sin memorizarla de la especificación, y luego copiar el CSS o las clases de Tailwind resultantes.

Configura el contenedor con display:flex y flex-wrap:wrap para que los elementos pasen a una nueva línea cuando se quedan sin espacio, y dale a cada tarjeta un flex-basis compartido para controlar su ancho antes de ajustarse. Un basis como 200px combinado con flex-grow permite que las tarjetas se expandan para llenar la fila y se reacomoden en menos columnas en pantallas angostas, todo sin media queries. Agregar un gap mantiene un espaciado consistente entre filas y columnas. El preajuste Card Grid de este playground carga exactamente esta configuración — seis tarjetas que se ajustan compartiendo un flex-basis con un gap de 16px — para que puedas estudiar un layout responsivo funcional, ajustar el basis o la cantidad de elementos, y ver cómo se reacomodan las columnas en vivo a medida que cambia el ancho de la vista previa. Como las tarjetas se dimensionan a partir de su basis en lugar de un número fijo de columnas, las mismas reglas se adaptan desde escritorios anchos hasta teléfonos. Cuando se vea bien, copia el CSS o las clases de Tailwind generadas directamente en tu proyecto.

flex es el shorthand de tres propiedades en orden: flex-grow, flex-shrink y flex-basis. Entonces flex: 0 0 240px significa flex-grow:0 (el elemento no se estirará para llenar espacio extra), flex-shrink:0 (no se encogerá por debajo de su tamaño aunque el espacio sea reducido) y flex-basis:240px (su ancho inicial queda fijo en 240px). El resultado es un elemento rígido y de ancho fijo — perfecto para una barra lateral que debe mantenerse en 240px mientras el área de contenido principal se ajusta a su alrededor. El preajuste Sidebar Layout usa exactamente este valor para su columna fija junto a un área principal flexible. En contraste, flex: 1 se expande a flex-grow:1, flex-shrink:1, flex-basis:0, lo que hace que un elemento llene el espacio disponible de forma ávida — el comportamiento opuesto. Como el playground expone flex-grow, flex-shrink y flex-basis como controles independientes por elemento en cada tarjeta, puedes ajustar este shorthand pieza por pieza, ver el efecto en la vista previa en vivo y copiar el CSS resultante.

align-items solo cambia algo cuando los elementos son más pequeños que el contenedor a lo largo del eje transversal, porque los posiciona dentro de ese espacio sobrante. Dos situaciones comunes ocultan su efecto. Primero, el valor por defecto de align-items es stretch, que hace que los elementos se expandan para llenar el eje transversal — así que ya ocupan toda la altura en una fila y no queda espacio dentro del cual alinear. Segundo, si todos los elementos tienen el mismo tamaño que el contenedor o no tienen una altura explícita, alternar entre flex-start, center y flex-end no produce ningún movimiento visible. Dale a los elementos un ancho o alto fijo, o cambia align-items a un valor distinto de stretch, y la alineación se vuelve evidente. También puedes anular un solo elemento con align-self si solo quieres posicionar un hijo de forma diferente. En este playground puedes fijar el ancho y alto por elemento en cada tarjeta, y luego alternar align-items para ver exactamente cuándo surte efecto antes de copiar el código.

flex-wrap controla si los elementos flex se ven forzados a permanecer en una sola línea o si pueden distribuirse en varias líneas. Con nowrap, el valor por defecto, todos los elementos permanecen en una línea y se encogen para caber, lo que puede aplastarlos o provocar desbordamiento cuando no hay suficiente espacio. Con wrap, los elementos que no caben pasan a una nueva línea, conservando su tamaño preferido y creando un diseño de varias filas — esencial para cuadrículas de tarjetas responsivas y listas de etiquetas. También existe wrap-reverse, que distribuye las nuevas líneas apiladas en la dirección opuesta. Ten en cuenta que align-content, que distribuye esas líneas ajustadas, solo tiene efecto una vez que el ajuste realmente produce más de una línea. Este playground expone nowrap, wrap y wrap-reverse como un único control, así que puedes alternar entre ellos y ver cómo se reacomodan los elementos en la vista previa en vivo antes de copiar el código.