Gerador Flexbox

Experimente a direção flexível, envolva, justifique e alinhe. Observe a atualização dos layouts dos itens ao vivo e copie o CSS do contêiner.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Experimente a direção flexível, ajuste, justifique e alinhe — veja a atualização dos layouts ao vivo.
Executa no seu navegador
Grátis para usar

Text / on-page input

Visualizações multicamadas muito complexas podem parecer mais lentas em telefones mais antigos.

Os geradores de cores e CSS são executados inteiramente no seu navegador. Pré-visualizações e conversões nunca carregam seus estilos.

Use o Flexbox Generator sempre que precisar: experimente a direção flexível, ajuste, justifique e alinhe - veja a atualização dos layouts ao vivo.

Verifique se há CSS concorrentes em sua página (redefinições, cores herdadas). Copie primeiro a regra gerada em uma folha de estilo isolada.

Não. Geradores e conversores são executados em seu navegador com visualização ao vivo.

Não. Abra a ferramenta, ajuste os controles e copie o CSS.

Define columns, rows, and gaps visually, then copy CSS Grid template code.

Design layered box-shadows with offset, blur, spread, and color — live preview included.

Control each corner independently and preview rounded shapes with copy-ready CSS.