Área de testes CSS de flexbox
Explore alinhamento, quebra e espaçamento visualmente.
Como usar Área de testes 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.
- Digite os valores solicitados no painel de configurações.
- Ajuste a configuração básica e abra o modo avançado para opções de exportação e ajuste fino. A configuração personalizada continua ativa ao fechar o painel.
- Execute a área de testes CSS de flexbox, revise a saída e use os controles disponíveis para copiar ou baixar.
O que esta ferramenta suporta
Explore alinhamento, quebra e espaçamento visualmente.
- Direção
- row · column · row-reverse · column-reverse
- Justificar conteúdo
- flex-start · center · flex-end · space-between · space-around · space-evenly
- Alinhar itens
- stretch · flex-start · center · flex-end
- Quebra
- wrap · nowrap
- Espaço (px)
- Range: 0 to 100
- Itens
- Range: 1 to 30
Limites e processamento
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.
Perguntas frequentes
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.
Onde minha entrada é processada?
Esta operação processa sua fonte no seu navegador. Copiar e baixar são ações explícitas; a entrada de origem não é salva em conta nem em histórico.
Quais são os limites de entrada?
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.