Gerador CSS Flexbox
O gerador de Flexbox CSS permite definir flex-direction, justify-content, align-items, flex-wrap, align-content e gap em um contêiner, visualizar até 20 itens ao vivo e copiar o CSS gerado.
Sobre esta ferramenta
O gerador de Flexbox CSS permite definir flex-direction, justify-content, align-items, flex-wrap, align-content e gap em um contêiner, visualizar até 20 itens ao vivo e copiar o CSS gerado.
Como usar
- Escolha a direção e a quebra de linha (wrap).
- Defina justify-content e align-items (e align-content quando houver várias linhas).
- Ajuste o gap e o número de itens da prévia.
- Clique em Copiar CSS para usar as regras do contêiner.
Bom saber
- justify-content alinha os itens ao longo do eixo principal; align-items os alinha no eixo transversal.
- flex-direction: column inverte os eixos, então justify-content passa a atuar na vertical.
- align-content só tem efeito quando os itens quebram em várias linhas.
- A propriedade gap funciona no Flexbox em todos os principais navegadores atuais.
- O Flexbox é unidimensional; use CSS Grid para controlar linhas e colunas ao mesmo tempo.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como centralizar uma div com Flexbox?
No elemento pai, defina display: flex; justify-content: center; align-items: center; e o filho fica centralizado na horizontal e na vertical.
Qual a diferença entre justify-content e align-items?
justify-content distribui os itens ao longo do eixo principal (uma linha, por padrão); align-items os posiciona no eixo transversal.
Quando usar Flexbox em vez de Grid?
Use Flexbox para layouts unidimensionais, como barras de navegação e fileiras de botões, e Grid para layouts de página bidimensionais.
Por que o align-content não faz nada?
align-content só se aplica quando o flex-wrap permite que os itens quebrem em mais de uma linha.