Gerador CSS Flexbox
Gerador CSS Flexbox grátis: preview ao vivo, saída Tailwind + CSS simultânea, 10 presets prontos, avisos contextuais e exportação React/JSX. Sem cadastro.
Atualizado em junho de 2026
Revisado por Rafael Duarte
Requer flex-wrap: wrap
flex
gap-4Clique em um item no preview para editar suas propriedades.
Como usar
De um preset a código pronto em menos de um minuto
1. Escolha um preset
Navbar, Card Grid, Sidebar, Holy Grail — o preview e o código atualizam imediatamente.
2. Ajuste container e itens
flex-direction, justify-content, align-items — ou clique num item para editar grow/shrink/order.
3. Copie o código
Alterne entre Tailwind, CSS ou React e copie, ou baixe o arquivo CSS.
O que esta ferramenta faz
Saída dupla, avisos que explicam o motivo
Tailwind e CSS simultâneos
Veja as duas saídas ao mesmo tempo, mais uma aba React/JSX.
10 presets prontos
Navbar, Centered Hero, Card Grid, Sidebar, Holy Grail e mais — comece de um padrão real.
Avisos contextuais
Quando uma propriedade não tem efeito na configuração atual, a ferramenta explica o motivo.
Edição por item
Clique em qualquer caixa do preview para editar flex-grow, shrink, basis, align-self e order.
Preview responsivo (mobile/tablet/desktop)
Alterne o viewport do preview entre mobile (375px), tablet (768px) e desktop para ver como o layout se comporta antes de copiar o código.
Preset App Shell com código multi-elemento
O preset App Shell gera blocos de CSS/Tailwind/React separados para navbar, sidebar e conteúdo — pronto para colar em um layout de aplicação completo.
Exemplos
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Navbars
flex + justify-content:space-between + align-items:center — logo à esquerda, links à direita.
Centralizar um elemento
O jeito mais rápido de centralizar uma div nos dois eixos.
Linhas de cards
flex-wrap:wrap + gap — cards quebram para a próxima linha quando o viewport encolhe.
Sidebar + conteúdo
Um item estreito fixo e outro que cresce com flex-grow:1 para preencher o resto.
Campos de formulário em linha
flex + align-items:center + gap — label e input alinhados na mesma linha, com espaçamento consistente.
Grupos de botões
flex-wrap:wrap + justify-content:flex-end + gap — botões quebram para a próxima linha em telas pequenas sem estourar o layout.
Erros comuns
Confundir justify-content com align-items
justify-content controla o eixo principal; align-items controla o eixo cruzado (perpendicular).
align-content sem flex-wrap:wrap
Só tem efeito quando os itens realmente quebraram para múltiplas linhas — a ferramenta avisa quando isso acontece.
Esperar que order mude a ordem do DOM
order só afeta a ordem visual — a ordem de tabulação segue o DOM, o que impacta acessibilidade.
Itens não encolhem abaixo do conteúdo
Por padrão min-width é auto — um item não encolhe menor que o próprio conteúdo mesmo com flex-shrink, causando overflow. Defina min-width:0 no item para permitir encolher de verdade.
Esquecer que align-items:stretch é o padrão
Sem definir align-items, os itens esticam para preencher a altura do container no eixo cruzado — o que surpreende quem esperava altura automática. Defina align-items:flex-start se não quiser esse comportamento.
Container sem altura para centralizar verticalmente
justify-content:center e align-items:center só centralizam de verdade se o container tiver uma altura definida (fixa, 100vh ou herdada do pai) — sem altura, não há espaço extra para centralizar.
Por que usar esta ferramenta
Mostra classes Tailwind e CSS vanilla ao mesmo tempo — a maioria dos geradores só oferece um formato de saída.
Os avisos contextuais explicam exatamente por que uma propriedade não está funcionando, poupando o processo de tentativa e erro que a maioria dos devs encontra com align-content e flex-wrap.
Além do CSS e Tailwind, a ferramenta simula o layout em diferentes larguras de tela (mobile, tablet, desktop) e permite editar até 8 itens individualmente — grow, shrink, basis, align-self e order — direto no preview, sem precisar testar no próprio projeto.
Flexbox vs. CSS Grid
Quando usar cada um
Perguntas frequentes
justify-content controla o eixo principal (horizontal em row, vertical em column). align-items controla o eixo cruzado. Para centralizar nos dois eixos, defina os dois como center.
Referências
Referência completa da especificação com dados de compatibilidade.
O guia visual mais consultado para todas as propriedades do Flexbox.
A especificação oficial do W3C que define o comportamento de todas as propriedades do Flexbox.
Ferramentas Relacionadas
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
