Playground de Flexbox com controles do container e de cada item, preview ao vivo e CSS ou Tailwind.
`flex-direction` define o eixo principal (linha ou coluna) e é a primeira decisão de qualquer layout flex. `justify-content` alinha os itens ao longo do eixo principal, `align-items` alinha ao longo do eixo cruzado, e `align-content` só entra em ação quando há `flex-wrap: wrap` e mais de uma linha de itens. No nível do item, `flex-grow` controla o quanto ele cresce para preencher espaço sobrando (0 significa não crescer), `flex-shrink` controla o quanto ele encolhe quando falta espaço, e `flex-basis` define o tamanho inicial antes de grow/shrink entrarem em ação, geralmente mais previsível que usar `width` diretamente. A propriedade `order` muda a posição visual do item sem tocar na ordem real do HTML, itens com `order` menor aparecem primeiro, o valor padrão de todos é 0.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/gerador-flexbox"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Gerador de Flexbox"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
justify-content alinha os itens ao longo do eixo principal (definido por flex-direction), align-items alinha ao longo do eixo cruzado, perpendicular ao principal. Em `flex-direction: row`, justify-content controla o alinhamento horizontal e align-items o vertical, em `column` os dois se invertem.
Clique em um item para editá-lo, arraste para reordenar (altera o order de cada item).
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}O CSS é gerado localmente no navegador.