Flexbox Playground
Teste propriedades CSS Flexbox interativamente. Ajuste direction, justify, align, wrap e gap com preview ao vivo.
O que é Flexbox Playground?
Experimente as propriedades do CSS Flexbox de forma interativa e copie o código na hora, direto no navegador. O humberto.ai deixa você ajustar flex-direction, justify-content, align-items, flex-wrap e gap, com preview ao vivo dos itens se reorganizando — e gera o CSS do container pronto para colar. A forma mais rápida de entender Flexbox na prática. Sem cadastro.
Como usar
- Ajuste as propriedades do container: direction, justify-content, align-items, wrap e gap.
- Adicione ou remova itens para ver como se distribuem.
- O preview mostra o resultado em tempo real.
- Copie o CSS gerado do container.
Perguntas frequentes
Qual a diferença entre justify-content e align-items?
justify-content alinha os itens ao longo do eixo principal (definido por flex-direction); align-items alinha no eixo transversal (perpendicular). Em 'flex-direction: row', justify controla o horizontal e align o vertical.
Quando usar Flexbox em vez de Grid?
Flexbox brilha em layouts unidimensionais — uma barra de navegação, um grupo de botões, itens em linha ou coluna. Para layouts bidimensionais (linhas e colunas simultâneas), o CSS Grid é mais adequado.
O que faz o flex-wrap?
Controla se os itens quebram para a próxima linha quando não cabem. 'nowrap' (padrão) mantém tudo numa linha, podendo espremer os itens; 'wrap' permite que pulem para a linha seguinte.
Como centralizo um elemento com Flexbox?
No container: 'display: flex; justify-content: center; align-items: center'. Isso centraliza o(s) filho(s) tanto na horizontal quanto na vertical — o jeito clássico de centralizar em CSS.
Preciso de biblioteca para usar Flexbox?
Não. Flexbox é nativo de todos os navegadores modernos. Cole o CSS gerado direto no seu projeto.