Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Flexbox CSS (Visual)

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

Propriedades do Contêiner

flex-direction

justify-content

align-items

flex-wrap

align-content

Aplica-se apenas quando os itens são quebrados em múltiplas linhas.

Espaçamento (px)

Itens

Contagem do item

Clique em um item na prévia para editar suas propriedades.

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de Flexbox CSS (Visual)

Dê forma a layouts de Flexbox visualmente e copie CSS pronto para produção. Ajuste a direção, alinhamento, envoltório, espaçamento e sobrescritas por item enquanto uma prévia em tempo real atualiza instantaneamente. Sem suposições, sem viagens de DevTools no Chrome — apenas escolha o comportamento do contêiner que precisa, veja como ele é renderizado e pegue as regras geradas.

Como usar

Escolha um flex-direction (linha, linha-reversa, coluna, coluna-reversa) para definir o eixo principal.
Escolha justify-content e align-items para como os filhos alinham ao longo de cada eixo.
Ligar flex-wrap se os itens devem quebrar para novas linhas — align-content aparecerá para o controle de múltiplas linhas.
Defina o gap em pixels para separar os itens sem margens.
Mude o número de itens para adicionar ou remover filhos flex (1–12).
Clique em qualquer item na prévia para abrir o editor por item e ajustar flex-grow, flex-shrink, flex-basis, align-self, ou order.
Copie o CSS gerado e coloque em sua folha de estilo.

Características

Prévia visual em tempo real – Veja o contêiner e os itens reorganizando-se instantaneamente enquanto você altera as propriedades.
Controles completos do contêiner – flex-direction, justify-content, align-items, flex-wrap, align-content e gap.
Sobrescritas por item – Clique em um item para editar flex-grow, flex-shrink, flex-basis, align-self e order sem procurar no DevTools.
Contagem dinâmica de itens – Adicione ou remova filhos flex entre 1 e 12 para refletir seu UI real.
Saída de CSS limpa – Seletores do contêiner e por item são gerados como um trecho limpo e pronto para cópia.
Executa inteiramente no navegador – Sem upload, sem viagem de rede; sua configuração nunca sai da página.

 Perguntas frequentes

Qual a diferença entre justify-content e align-items?

justify-content posiciona os itens ao longo do eixo principal (a direção definida por flex-direction), enquanto align-items os posiciona ao longo do eixo transversal. Trocar flex-direction entre linha e coluna inverte qual propriedade controla alinhamento horizontal versus vertical.
Quando o align-content realmente se aplica?

align-content só tem efeito quando flex-wrap permite que os itens quebrem em múltiplas linhas. Em um contêiner flex de uma única linha (flex-wrap: nowrap), o navegador ignora align-content porque há apenas uma linha para alinhar.
O que controla flex-grow, flex-shrink e flex-basis?

flex-basis é o tamanho inicial do item ao longo do eixo principal. flex-grow distribui o espaço livre restante proporcionalmente aos itens que têm valor maior que 0. flex-shrink permite que os itens diminuam abaixo de sua base quando o espaço acabar; 0 significa que o item mantém seu tamanho inicial.
O order pode substituir a alteração de markup HTML?

A propriedade order altera apenas a posição visual — a ordem original no DOM permanece a mesma. Isso mantém flexibilidade para layout, mas pode prejudicar usuários de leitores de tela se a ordem visual e lógica se afastarem muito, portanto, use com parcimônia em conteúdos sensíveis à acessibilidade.
Devo ainda usar Flexbox quando o CSS Grid existe?

O Flexbox é otimizado para layouts unidimensionais — uma linha ou uma coluna onde os itens se ajustam ao seu conteúdo e ao espaço disponível. O Grid excela em layouts bidimensionais com faixas explícitas. A maioria das interfaces reais usa ambos: o Grid para a estrutura da página e o Flexbox para componentes dentro de cada célula.