Zona de juegos CSS Flexbox

Cree y depure diseños de flexbox visualmente con vistas previas en tiempo real, controles a nivel de elementos y CSS listo para exportar para una implementación de interfaz más rápida.

CSS Flexbox Playground

Configure flex container behavior and per-item flex values visually, then export implementation-ready CSS and markup for responsive UI layouts.

Container Controls

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px)

padding (px)

Item Controls

Item 1

Label

flex-basis (px)

flex-grow

flex-shrink

Item 2

Label

flex-basis (px)

flex-grow

flex-shrink

Item 3

Label

flex-basis (px)

flex-grow

flex-shrink

Item 4

Label

flex-basis (px)

flex-grow

flex-shrink

Item 5

Label

flex-basis (px)

flex-grow

flex-shrink

Item 6

Label

flex-basis (px)

flex-grow

flex-shrink

Live Flex Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Generated Flexbox CSS + Markup

.flex-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
  padding: 12px;
}

.flex-layout__item {
  min-height: 72px;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

<div className="flex-layout">
  <div className="flex-layout__item" style={{ flex: '2 1 180px' }}>
    Item 1
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 2
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 3
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 180px' }}>
    Item 4
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 5
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 6
  </div>
</div>

Flexbox Report

CSS Flexbox Playground Report
============================
Direction: row
Wrap: wrap
Justify Content: flex-start
Align Items: stretch
Align Content: stretch
Gap: 12px
Padding: 12px
Items: 6

1. Item 1 | flex: 2 1 180px
2. Item 2 | flex: 1 1 140px
3. Item 3 | flex: 1 1 140px
4. Item 4 | flex: 1 1 180px
5. Item 5 | flex: 1 1 140px
6. Item 6 | flex: 1 1 140px

Características

Control total del contenedor: ajuste las combinaciones de dirección, ajuste, espaciado y alineación para explorar el comportamiento práctico de diseño flexible para tarjetas, barras de herramientas y shells de aplicaciones.
Controles flexibles por elemento: ajuste el crecimiento flexible, la contracción flexible y la base flexible para cada elemento de forma independiente para crear un prototipo del comportamiento de distribución real bajo diferentes restricciones de ventana gráfica.
Vista previa visual interactiva: observe la representación en vivo mientras edita valores para que pueda identificar rápidamente problemas de alineación, ajuste y espaciado antes de codificar los componentes finales.
Fragmentos listos para exportar: copie CSS generado y estructuras de marcado directamente en su proyecto, lo que reduce la prueba y error al implementar diseños flexibles de producción.

Casos de uso

Barras de navegación: cree prototipos de patrones de navegación horizontales y ajustados con espaciado y alineación equilibrados antes de integrarlos en los componentes del encabezado.
Paneles de panel: cree grupos de paneles que se expandan y reduzcan de manera predecible en todos los tamaños de ventanas gráficas ajustando la base de los elementos y las proporciones de crecimiento y reducción.
Listas de tarjetas: Pruebe envolver filas de tarjetas y pilas verticales rápidamente para elegir la dirección y el comportamiento de alineación correctos para pantallas con mucho contenido.
Sistemas de diseño de formularios: valide cómo las etiquetas, las entradas y los grupos de acciones se alinean y ajustan bajo restricciones de ancho para lograr una ergonomía de formulario consistente.
Revisiones de diseño: comparta prototipos flexibles concretos durante las revisiones del equipo y exporte inmediatamente fragmentos de código que coincidan con el comportamiento de diseño aprobado.
Capacitación frontend: demuestre cómo interactúan las propiedades flexibles en tiempo real para la incorporación, talleres y sesiones de depuración con desarrolladores junior.

Por qué ayuda

Flexbox es potente pero a menudo requiere pruebas y errores repetidos en varias propiedades. Esta herramienta mantiene sincronizados los controles, la vista previa y el código generado para una iteración del diseño más rápida.

Del prototipo a la producción

Después de ajustar los valores, puede copiar CSS y fragmentos de marcado en su proyecto para reducir el tiempo de implementación y preservar la intención del diseño.

Procesamiento local privado

Todo se ejecuta localmente en el navegador sin necesidad de realizar cargas ni iniciar sesión, lo que lo hace confiable para experimentos internos rápidos y flujos de trabajo en equipo.

Preguntas frecuentes

Puede configurar flex-direction, flex-wrap, justify-content, align-items, align-content, gap y padding desde el panel de control.

Sí. Cada elemento admite valores independientes de crecimiento flexible, contracción flexible y base flexible para que pueda modelar un comportamiento de distribución realista.

Sí. La herramienta genera CSS de contenedor más fragmentos de marcado y un informe adicional para documentar o compartir.

Sí. Puede agregar elementos dinámicamente o eliminar el último para probar diferentes tamaños de contenido y condiciones de ajuste.

Sí. Es gratuito, no requiere iniciar sesión y se ejecuta completamente en su navegador.

align-items controla la alineación transversal de los elementos dentro de una sola línea. align-content controla el espacio entre varias líneas cuando flex-wrap está habilitado y hay espacio adicional en el eje transversal.

No. Es 100% gratis y no es necesario registrarse. Toda la generación de diseño y la representación de vista previa se realizan en el lado del cliente en su navegador sin enviar datos a ningún servidor.