Categoria: Desenvolvimento
Gerador de Flexbox CSS
Construa um contêiner flex visualmente e copie o CSS
Defina flex-direction, flex-wrap, justify-content, align-items e gap em uma pré-visualização ao vivo construída com itens flex reais, depois copie a declaração final do contêiner. Nada aqui sai do seu navegador.
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
O Flexbox tem cinco propriedades que interagem entre si — a direção muda o que significa "eixo principal" para a quebra e para o justify-content — por isso é mais rápido ver uma mudança do que imaginá-la. Esta ferramenta mantém um contêiner flex real na tela com itens numerados dentro dele, de modo que cada opção é avaliada pelo comportamento real das caixas, e não por um modelo mental da especificação.
Como usar
- Defina flex-direction e flex-wrap.
- Escolha justify-content e align-items, e ajuste o espaçamento e a quantidade de itens.
- Copie a regra .container finalizada para a sua folha de estilos.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- A pré-visualização é um layout flex real?
- Sim. As caixas numeradas são organizadas com o CSS exato que você está definindo, não uma imagem dele, então o que você vê é o que a regra copiada produz.
- Por que mudar flex-direction muda o que justify-content faz?
- O justify-content sempre atua ao longo do eixo principal, e é o flex-direction que decide se esse eixo é horizontal ou vertical. Mudar para column transforma o "justificar" de esquerda/direita para cima/baixo.
- Algo sobre o meu layout é enviado para algum lugar?
- Não. O CSS é um texto montado na página a partir dos controles que você define, e a pré-visualização é renderizada localmente.