Zona de pruebas de Flexbox

Todas las herramientas

Experimenta con las propiedades de CSS Flexbox sobre elementos en vivo y copia el CSS de diseño generado.

Vista previa Haz clic en un elemento para editarlo
CSS generado
—

Todo se ejecuta en tu navegador: no se sube nada.

Contenedor
12px
Elementos
0
Elemento seleccionado

Acerca de Zona de pruebas de Flexbox

El Playground de Flexbox es una zona de pruebas práctica para el flexbox de CSS. Establece las propiedades del contenedor (flex-direction, flex-wrap, justify-content, align-items, align-content y gap) y observa cómo hasta 12 elementos en vivo se reorganizan en la vista previa mientras cambias cada valor. Es la forma más rápida de interiorizar lo que realmente hace cada propiedad.

Los elementos son editables individualmente: haz clic en uno para seleccionarlo y ajustar su flex-grow, flex-shrink, flex-basis, align-self y order. Ver cómo un elemento crece para absorber el espacio libre mientras sus hermanos mantienen su ancho enseña el modelo de tamaño flex más rápido que cualquier diagrama.

El playground genera CSS limpio para el contenedor y cualquier elemento con ajustes distintos a los predeterminados: cópialo directamente en tu hoja de estilos. Todo se ejecuta en tu navegador sin nada que se suba, y un botón de reinicio te devuelve a un punto de partida limpio.

Cómo usar Zona de pruebas de Flexbox

  1. Establece flex-direction, wrap, justify-content, align-items, align-content y gap del contenedor.
  2. Añade o elimina elementos (entre 2 y 12) para reflejar tu componente real.
  3. Haz clic en un elemento y ajusta su grow, shrink, basis, align-self y order.
  4. Observa cómo se actualiza la vista previa en vivo con cada cambio.
  5. Copia el CSS generado y pégalo en tu proyecto.

Preguntas frecuentes

flex-grow distribuye el espacio sobrante: un elemento con grow 2 recibe el doble de espacio extra que uno con grow 1. flex-shrink funciona al revés cuando el espacio escasea. Ambos son proporciones entre hermanos, no tamaños absolutos.

align-items posiciona los elementos a lo largo del eje transversal dentro de su línea. align-content espacia varias líneas ajustadas dentro del contenedor; solo tiene un efecto visible cuando flex-wrap produce más de una línea.

Cada elemento flex tiene por defecto order 0; los elementos se colocan desde el orden más bajo hasta el más alto. Cambiar el order de un elemento lo mueve visualmente sin tocar el HTML: la secuencia del DOM, y por tanto el orden para lectores de pantalla, permanece igual.

Sí. El CSS generado cubre las reglas del contenedor más un selector para cada elemento cuyo grow, shrink, basis, align-self u order difiere del predeterminado, para que puedas pegar un diseño completo y funcional.

Sí, gratuito, sin registro y completamente del lado del cliente. Tus experimentos nunca salen de la pestaña del navegador.
Compartir
Herramientas relacionadas
Constructor de firmas de correo Diseña una firma HTML profesional a partir de 30 plantillas, personalízala y guárdala. Gratis
Icono a PNG Convierte Bootstrap Icons, Font Awesome y más en imágenes PNG personalizadas — gratis, en tu navegador. Gratis
Generador de iconos de app Genera un conjunto completo de iconos de app listos para publicar en la App Store y Google Play — fondos premium con degradados, mesh y patrones, creados a partir de tu logo. Gratis
Generador de favicons Crea un paquete completo de favicons a partir de un logo, un icono de fuente o un monograma — favicon.ico, PNG modernos, icono Apple touch, iconos PWA, manifiesto web y fragmento HTML. Gratis
Generador de box-shadow CSS Crea sombras CSS en capas con controles deslizantes para desplazamiento, desenfoque, extensión, color, opacidad e inset — previsualiza sobre un elemento real y copia el CSS listo al instante. Gratis
Generador de border-radius CSS Crea visualmente border-radius en CSS con vista previa en directo y copia código listo para producción. Gratis
Búsquedas populares
zona de pruebas flexbox generador de flexbox css generador de contenedor flex herramienta justify-content align-items generador de diseño flex css visualizador de flexbox generador de código flexbox
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.
Informar de un problema

Añade esta herramienta gratuita a tu propio sitio web: copia y pega el código de abajo.