Playground de CSS Flexbox
NovoAjuste as propriedades flex com prévia ao vivo e copie o CSS.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
Um gerador visual de flexbox que escreve o CSS pra você
Este gerador de flexbox transforma o CSS Flexible Box Layout em algo que você consegue visualizar. Em vez de adivinhar o que justify-content ou align-items vão fazer, você ativa cada propriedade num controle com rótulo e vê a prévia ao vivo se reorganizar na hora — depois é só copiar um código limpo e pronto pra produção. Roda totalmente no seu navegador, sem cadastro e sem nada sendo enviado.
É um verdadeiro playground de flexbox: um container flex real com elementos filhos editáveis, controles completos do container e por elemento, containers aninhados, uma prévia responsiva redimensionável e uma URL compartilhável. Seja aprendendo flexbox ou construindo rapidamente uma navbar, uma linha de cards ou um hero centralizado, você consegue o layout exato — e o CSS, Tailwind ou Bootstrap pra combinar — em segundos.
Cada propriedade do container, com prévia ao vivo
Controle o container do jeito que a especificação define. Configure o flex-direction (row, row-reverse, column, column-reverse) pra escolher o eixo principal, justify-content pra espaçar itens ao longo dele, e align-items pra alinhá-los no eixo transversal. Ative o flex-wrap pra deixar os itens fluírem pra novas linhas, use align-content pra espaçar essas linhas, e ajuste valores independentes de gap de linha e coluna.
Uma legenda de eixos integrada mostra qual direção é o eixo principal e qual é o eixo transversal ao mudar o flex-direction, pra que a relação entre justify-content e align-items finalmente faça sentido. É uma cola de flexbox interativa que você aprende fazendo.
Controle por elemento: grow, shrink, basis, order e align-self
A maioria dos geradores para no container. Este deixa você clicar em qualquer elemento na prévia e editá-lo individualmente: configure flex-grow, flex-shrink e flex-basis (o atalho flex), sobrescreva o align-self e mude a order pra reposicioná-lo sem mexer no HTML. Adicione ou remova elementos pra testar como o espaço é redistribuído.
Isso facilita construir padrões reais — uma sidebar fixa ao lado de uma coluna principal flexível (flex: 0 0 240px ao lado de flex: 1), um único elemento centralizado, ou um link de rodapé empurrado pro final com margin-left: auto.
Flexbox aninhado e prévia responsiva
Layouts reais se aninham. Qualquer elemento pode se tornar seu próprio container flex aninhado com sua própria direção, justify e align — exatamente o que um gerador de flexbox aninhado precisa pra cards com uma linha de cabeçalho acima do corpo, ou uma toolbar dentro de outra toolbar. O código gerado inclui as regras aninhadas também.
Como o flexbox é sobre comportamento responsivo, a prévia é redimensionável: arraste a alça ou escolha um preset de largura Mobile / Tablet / Desktop e veja os itens se ajustarem em cada tamanho. É a forma mais rápida de confirmar que um layout flexbox responsivo funciona antes de publicar.
Copie como CSS, Tailwind ou Bootstrap — e como se compara a outras ferramentas
Mude a aba de saída pro formato que seu projeto usa. CSS te dá regras limpas .container e por elemento usando o atalho flex. Tailwind escreve as classes utilitárias — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — num snippet HTML pronto pra colar. Bootstrap gera as classes utilitárias equivalentes d-flex. Só as propriedades que você realmente mudou são incluídas, então a saída fica mínima e legível.
Outros geradores visuais como Flexbox.help omitem os controles por elemento e containers aninhados. O playground online do Tailwind não gera CSS vanilla. Essa ferramenta faz os três formatos de saída, suporta aninhamento e funciona offline após carregada — sem conta, sem custo, sem dados saindo do seu navegador.
Frequently asked questions
O que é o Flexbox no CSS e pra que serve?
O Flexbox (CSS Flexible Box Layout) é um modelo de layout unidimensional pra organizar itens em uma única linha ou coluna e distribuir espaço entre eles. Você ativa com uma linha — display: flex — no elemento pai, e os filhos viram itens flex que você pode alinhar, espaçar e redimensionar sem floats ou margens manuais. É muito usado porque facilita tarefas comuns: centralizar, colunas de mesma altura, navbars, linhas de cards e layouts que eram complicados antes.
Como usar o flexbox na prática?
Adicione display: flex no elemento container, depois controle os filhos com as propriedades do container — flex-direction (row ou column), justify-content (espaçamento no eixo principal), align-items (alinhamento no eixo transversal), flex-wrap e gap. Por exemplo, .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } organiza um logo e links em uma linha, centralizados verticalmente, nas extremidades opostas.
Como centralizar um div com flexbox?
Torne o pai um container flex e centralize nos dois eixos: .parent { display: flex; justify-content: center; align-items: center; } — isso coloca o filho exatamente no centro horizontal e vertical. Dê ao pai uma altura (por exemplo min-height: 100vh pra centralização em tela cheia). É a forma mais limpa de centralizar perfeitamente um elemento.
Qual a diferença entre justify-content e align-items?
justify-content posiciona itens ao longo do eixo principal, enquanto align-items os posiciona no eixo transversal. Com o flex-direction: row padrão, justify-content espaça os itens horizontalmente e align-items os alinha verticalmente. Mude pra flex-direction: column e os dois trocam de papel. A legenda de eixos ao vivo na ferramenta mostra qual é qual ao mudar a direção.
O que são flex-grow, flex-shrink e flex-basis?
São as três propriedades por elemento que decidem como um item flex se dimensiona, geralmente escritas juntas no atalho flex. flex-basis é o tamanho inicial antes de dividir o espaço livre. flex-grow indica o quanto um item cresce pra preencher o espaço sobrante (0 = não cresce, 1 = divide igualmente). flex-shrink indica o quanto encolhe quando o espaço está apertado. O comum flex: 1 significa crescimento igual pra todos os itens.
Como fazer os itens flex quebrarem linha?
Configure flex-wrap: wrap no container pra que os itens que não cabem passem pra uma nova linha em vez de transbordar. Por padrão flex-wrap é nowrap. Com a quebra ativada, dê aos itens um flex-basis (como flex: 1 1 200px) pra cada linha preencher bem, e use align-content pra espaçar as linhas resultantes.
Este gerador de flexbox é gratuito e privado?
Gratuito sem precisar de cadastro. Todo o playground roda no seu navegador — seu layout, o CSS gerado e o link de compartilhamento são criados no seu dispositivo e nunca enviados pra um servidor. Você pode salvar nos favoritos e usar offline depois que a página tiver carregado. Sem conta pra criar e sem limite de layouts.
Related tools
Ver todas as ferramentas
Novo Misturador de cores
Misture duas cores em qualquer proporção e copie o resultado ou qualquer etapa.
Novo Seletor de cores de imagem
Escolha qualquer cor de uma imagem e extraia a paleta dominante em HEX, RGB e HSL.
Novo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Seletor e conversor de cor
Escolha uma cor e converta entre HEX, RGB, HSL e OKLCH.
Novo Verificador de contraste de cores
Verifique as razões de contraste WCAG AA/AAA entre as cores de texto e fundo.