Zona de pruebas CSS de flexbox
Explora alineación, ajuste y espaciado de forma visual.
Cómo usar Zona de pruebas CSS de flexbox
CSS flexbox playground previews a flex container with 1 to 30 numbered items and writes the matching CSS. Set flex-direction (row, column or their reverses), justify-content including space-between and space-evenly, align-items, wrap or nowrap, and a gap from 0 to 100 px, then copy the six declarations once the preview looks right.
- Introduce los valores solicitados en el panel de ajustes.
- Ajusta la configuración básica y abre el modo avanzado para opciones de exportación y ajuste fino. La configuración personalizada sigue activa al cerrar el panel.
- Ejecuta la zona de pruebas CSS de flexbox, revisa la salida y usa los controles disponibles para copiar o descargar.
Qué admite esta herramienta
Explora alineación, ajuste y espaciado de forma visual.
- Dirección
- row · column · row-reverse · column-reverse
- Justificar contenido
- flex-start · center · flex-end · space-between · space-around · space-evenly
- Alinear elementos
- stretch · flex-start · center · flex-end
- Ajuste
- wrap · nowrap
- Espacio (px)
- Range: 0 to 100
- Elementos
- Range: 1 to 30
Límites y procesamiento
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.
Preguntas frecuentes
What is the difference between space-between, space-around and space-evenly?
space-between puts the first and last items at the edges with equal gaps between items. space-around gives each item equal space on both sides, so edge gaps are half the inner ones. space-evenly makes every gap, including the edges, the same. Try each in the preview.
Why does align-items seem to do nothing in the flexbox preview?
align-items works on the cross axis. With direction row, it moves items vertically inside the 220 px tall preview, and stretch makes them fill that height. With column, it acts horizontally, so switch direction to see the change.
Does the flexbox playground set flex properties on the items?
No. The output covers only the container: display, flex-direction, justify-content, align-items, flex-wrap and gap. Item properties like flex-grow or order are not generated, so add them separately if individual items need to size differently.
¿Dónde se procesa mi entrada?
Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.
¿Cuáles son los límites de entrada?
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.