Gerador de Flexbox CSS
Escolha direção, alinhamentos, quebra e espaço e copie o CSS do container flex.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
O que cada propriedade controla
| Campo | Propriedade | Efeito |
|---|---|---|
| Direção | flex-direction | eixo principal: em linha (row) ou em coluna (column), normal ou invertido |
| Alinhamento principal | justify-content | distribui os itens ao longo do eixo principal |
| Alinhamento cruzado | align-items | alinha os itens no eixo perpendicular |
| Quebra | flex-wrap | deixa os itens passarem para a linha seguinte em vez de encolher |
| Espaço entre itens | gap | distância entre os itens, em px |
Em coluna, os eixos se trocam: justify-content passa a agir na vertical e align-items, na horizontal.
Resultados de referência
| Escolhas | CSS gerado |
|---|---|
| centro e centro | display: flex; justify-content: center; align-items: center; |
| espaço entre, centro, espaço de 16 | display: flex; justify-content: space-between; align-items: center; gap: 16px; |
| coluna, centro e centro | display: flex; flex-direction: column; justify-content: center; align-items: center; |
| quebra de linha e espaço de 8 | display: flex; flex-wrap: wrap; gap: 8px; |
Propriedades no comportamento padrão (row, flex-start, stretch, nowrap e espaço 0) não aparecem na saída, porque não mudariam nada.
O que não está aqui
- Só o container: flex, flex-grow, flex-basis e order dos filhos não são gerados.
- Não há align-content nem justify-items; o espaço entre itens é um só valor, em px.
Perguntas frequentes
Como centralizar com flexbox?
Escolha centro nos dois alinhamentos. O resultado é: display: flex; justify-content: center; align-items: center;
Qual a diferença entre justify-content e align-items?
O justify-content age no eixo principal, definido pela direção; o align-items age no eixo cruzado. Em coluna, os dois trocam de lado.