Experimenta con las propiedades de flexbox en una vista previa en vivo y copia el CSS generado.
Acerca de esta herramienta
El Área de Pruebas de CSS Flexbox es un editor interactivo para las principales propiedades de diseño de un contenedor flex. Elige valores para flex-direction, justify-content, align-items y flex-wrap en cuatro menús desplegables, y una vista previa de cinco cajas numeradas se reorganiza al instante, para que veas cómo cada propiedad da forma al diseño antes de escribir código.
Debajo de la vista previa se genera la regla .container correspondiente mientras trabajas: display: flex seguido de las cuatro declaraciones que elegiste. Un botón copia todo el bloque a tu portapapeles, listo para pegar en una hoja de estilos. Solo se exponen estas propiedades a nivel de contenedor; los ajustes por elemento como flex-grow, order o align-self no se cubren.
Todo se ejecuta en tu navegador. No se sube nada, no hay cuentas ni rastreo, y funciona sin conexión. Es una forma rápida de desarrollar intuición sobre flexbox o de producir una regla inicial que luego refines a mano.
Preguntas frecuentes
¿Qué muestra la vista previa?
Un contenedor flex con cinco cajas numeradas que se reorganizan en vivo a medida que cambias flex-direction, justify-content, align-items o flex-wrap.
¿El CSS generado está listo para usar?
Sí. Copia la regla .container generada directamente en tu hoja de estilos; contiene display: flex más las cuatro propiedades que seleccionaste.
¿Qué propiedades de flexbox puedo ajustar?
Cuatro menús desplegables controlan flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) y flex-wrap (nowrap, wrap, wrap-reverse).
¿La salida incluye gap o ajustes flex por elemento?
No. La regla copiada contiene únicamente display: flex y las cuatro propiedades del contenedor. La separación de 8px en la vista previa es solo para el espaciado, y las propiedades a nivel de elemento como flex-grow, order o align-self no se incluyen.