Gerador de Flexbox CSS
Monte layouts Flexbox visualmente: direção, quebra de linha, justify-content, align-items, gap e crescimento por item. Predefinições para cabeçalhos, barras laterais e grades de cards. CSS, SCSS, Tailwind.
Carregando Gerador de Flexbox CSS…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de Flexbox CSS
- 1
Abra Gerador de Flexbox CSS nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Flexbox é o sistema de layout do CSS para organizar itens em linha ou em coluna: barras de navegação, grupos de botões, cards, conteúdo centralizado. As propriedades são poderosas, mas fáceis de confundir. Este gerador de Flexbox permite alterá-las com botões e ver o resultado em caixas ao vivo, e depois copiar o código.
Como montar um layout flex
- Comece por uma predefinição: horizontal, vertical, centralizado, space between, space around, space evenly, grade, cabeçalho, barra lateral ou grade de cards.
- Configure o contêiner: flex-direction, flex-wrap, justify-content, align-items, align-content e gap.
- Adicione ou remova itens e ajuste o flex-grow e o tamanho de cada um.
- Copie o CSS, o SCSS ou as classes do Tailwind.
Guia rápido de Flexbox
| Propriedade | O que faz |
|---|---|
| flex-direction | Eixo principal: row (horizontal) ou column (vertical) |
| justify-content | Espaçamento no eixo principal: start, center, end, between, around, evenly |
| align-items | Alinhamento no eixo transversal: stretch, start, center, end, baseline |
| flex-wrap | Se os itens vão para uma nova linha quando falta espaço |
| gap | Espaço entre os itens |
| flex-grow | Quanto um item cresce para ocupar o espaço livre |
Receitas comuns
- Centralizar qualquer coisa: display: flex; justify-content: center; align-items: center.
- Logo à esquerda, menu à direita: justify-content: space-between no cabeçalho.
- Layout com barra lateral: uma barra lateral de largura fixa e uma área principal com flex-grow: 1.
- Cards que quebram linha: flex-wrap: wrap com gap e uma largura mínima de card.
Flexbox ou grid?
Use Flexbox para uma direção por vez, como uma linha de botões ou uma coluna de campos. Use CSS grid para layouts bidimensionais com linhas e colunas que precisam se alinhar. Muitas páginas combinam os dois. Para grades de página, veja o gerador de sistema de grid; para estilizar as caixas, os geradores de border-radius e box-shadow.
Perguntas frequentes
Como centralizar uma div com Flexbox?
No elemento pai, defina display: flex, justify-content: center e align-items: center. Dê uma altura ao pai se quiser centralizar na vertical em uma área alta.
Qual a diferença entre justify-content e align-items?
justify-content distribui os itens no eixo principal (horizontal em uma linha) e align-items os alinha no eixo transversal (vertical em uma linha).
Quando usar Flexbox em vez de grid?
Flexbox para layouts em uma direção, como barras de navegação e grupos de botões; grid para layouts bidimensionais com linhas e colunas.
Posso obter classes do Tailwind?
Sim. Escolha a exportação Tailwind para receber classes utilitárias como flex, justify-between e gap-4.
Como fazer os itens irem para a próxima linha?
Defina flex-wrap: wrap no contêiner. Os itens passam para uma nova linha quando falta espaço.
O que o flex-grow faz?
Permite que um item ocupe o espaço livre restante. Um item com flex-grow: 1 cresce, enquanto itens com 0 mantêm o tamanho.