Gerador Flexbox
Ajuste um contentor Flexbox ao vivo e copie o CSS pronto a usar.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Domine o Flexbox sem tentativas
Escolha direção, alinhamento, quebra e espaçamento: a pré-visualização atualiza ao vivo e o CSS do contentor está pronto a copiar.
-
Defina as propriedades
direction, justify, align, wrap, gap.
-
Veja a pré-visualização
Elementos numerados reagem ao vivo.
-
Copie o CSS
Aplique-o ao seu contentor.
O CSS do contentor
| Propriedade | Função |
|---|---|
| display: flex | Ativa o Flexbox |
| flex-direction | Linha ou coluna |
| justify-content | Distribuição (eixo principal) |
| align-items | Alinhamento (eixo secundário) |
| gap | Espaço entre elementos |
O CSS aplica-se ao pai; os filhos colocam-se sozinhos. Tudo é gerado no seu navegador.
Perguntas frequentes
Para que serve o Flexbox?
O Flexbox é um modo de disposição CSS para alinhar e distribuir elementos numa linha ou coluna. Gere automaticamente o espaçamento, a centragem e a quebra de linha, o que simplifica muito os layouts responsivos.
Qual a diferença entre justify-content e align-items?
justify-content distribui os elementos ao longo do eixo principal (horizontal em row), align-items alinha-os no eixo secundário (vertical em row). Se mudar para column, ambos os eixos trocam.
O CSS gerado aplica-se ao contentor ou aos elementos?
Ao contentor. As propriedades (display: flex, justify-content, etc.) vão no pai; os filhos posicionam-se sozinhos. A pré-visualização mostra elementos numerados.
O que faz o flex-wrap?
Por defeito (nowrap), os elementos ficam numa só linha, encolhendo se preciso. Com wrap, passam para a linha seguinte quando falta espaço — útil para grelhas fluidas.