↔
Gerador de CSS Flexbox
Teste direção, alinhamento, distribuição, wrap e gap com uma prévia Flexbox.
1
2
3
4
5
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;Como funciona
Selecione as principais propriedades Flexbox. O contêiner de exemplo é atualizado imediatamente e o código CSS fica pronto para copiar.
Perguntas frequentes
Que propriedades posso definir?
Inclui flex-direction, justify-content, align-items, flex-wrap e gap.
Ajuda aprender Flexbox?
Sim. A prévia permite observar como a distribuição muda ao alterar cada propriedade.