Gerador de Flexbox com Pré-visualização ao Vivo
O Gerador de Flexbox é uma ferramenta visual que monta layouts com Flexbox para você, sem precisar escrever código do zero. Clique nos botões e ajuste os controles para moldar o container e seus itens, veja o layout se atualizar em tempo real e copie o CSS limpo direto para o seu projeto.
O Flexbox é um dos sistemas de layout mais poderosos do CSS, mas propriedades como justify-content, align-items e flex-wrap, além de controles por item como flex-grow e align-self, levam tempo para memorizar. Este gerador permite experimentar de forma visual e ver o resultado na hora, então é ideal para iniciantes que estão aprendendo como cada propriedade se comporta, pessoas desenvolvedoras que querem prototipar um layout rapidamente e pessoas de design que exploram opções antes do handoff.
Como usar o Gerador de Flexbox
Configure o container
Na seção Container, defina as propriedades flex do elemento pai: flex-direction (row ou column), flex-wrap, justify-content no eixo principal, align-items no eixo transversal, align-content para as linhas quebradas e o gap de linhas e colunas.
Gerencie os itens
Use Adicionar item e Remover item para definir quantas caixas você precisa, até 12 no total. Clique em um chip colorido, ou clique em um item diretamente na pré-visualização, para selecionar aquele que deseja editar.
Personalize o item selecionado
Para o item selecionado, ajuste order, flex-grow, flex-shrink e flex-basis para controlar o dimensionamento, sobrescreva o container com align-self e defina uma width, height e padding explícitos. Dê estilo visual a ele com uma cor de background e border-radius.
Copie o CSS gerado
O CSS é atualizado automaticamente e inclui apenas as propriedades que diferem dos valores padrão, mantendo a saída enxuta. Pressione Copiar para enviar o código para a área de transferência, ou Redefinir para voltar aos quatro itens padrão.
Recursos
Controle total do container
Defina todas as seis propriedades do container — flex-direction, flex-wrap, justify-content, align-items, align-content e gap — com grupos de botões identificados que mostram o valor CSS real.
Propriedades flex por item
Selecione qualquer item para ajustar order, flex-grow, flex-shrink, flex-basis e align-self de forma independente do container.
Estilo visual dos itens
Dê a cada item uma cor de fundo, border-radius, largura e altura explícitas e um padding personalizado para que a pré-visualização combine com o seu design.
Pré-visualização ao vivo
Cada mudança se atualiza na hora. O container aparece com uma borda tracejada e cada item recebe sua própria cor para facilitar a identificação.
Seleção de itens com um clique
Escolha um item para editar clicando no seu chip na lista ou clicando nele diretamente dentro da área de pré-visualização.
Adicionar ou remover itens
Monte layouts com de um a doze itens flex e ajuste a quantidade a qualquer momento.
Código limpo na saída
O CSS gerado lista apenas as propriedades não padrão, agrupando as regras do container em .container e os ajustes por item nos seletores .item-N.
Tamanho do container ajustável
Mude a largura da pré-visualização por porcentagem e a altura em pixels para simular diferentes viewports e testar como o layout responde.
Cópia com um clique
Copie o CSS pronto para usar para a área de transferência com um único clique e cole-o direto na sua folha de estilos.
Redefinir para os padrões
Restaure tudo com um clique — quatro itens, nenhuma propriedade personalizada e um container com 100% de largura por 300px de altura.
Perguntas Frequentes
Qual é a diferença entre justify-content e align-items?
O justify-content alinha os itens ao longo do eixo principal — horizontal em uma linha (row), vertical em uma coluna (column). O align-items alinha os itens ao longo do eixo transversal, na direção oposta. Em um layout em linha, o justify-content cuida do espaçamento horizontal enquanto o align-items cuida do alinhamento vertical.
Como centralizo uma div com Flexbox?
No container, defina justify-content como center e align-items como center. Isso centraliza os itens tanto na horizontal quanto na vertical. Escolha esses dois valores no gerador e a pré-visualização vai centralizar os itens na hora.
Quando o align-content faz efeito?
O align-content só se aplica quando o flex-wrap está definido como wrap (ou wrap-reverse) e os itens ocupam várias linhas. Ele controla como essas linhas são distribuídas ao longo do eixo transversal. Com uma única linha, não tem efeito visível.
Qual é a diferença entre flex-grow e flex-basis?
O flex-basis define o tamanho inicial de um item antes de o espaço ser distribuído, enquanto o flex-grow decide quanto do espaço restante ele reivindica. Um item com flex-basis: 100px e flex-grow: 1 começa em 100px e depois se expande para preencher o espaço disponível.
Qual é a diferença entre Flexbox e CSS Grid?
O Flexbox é um sistema unidimensional que dispõe os itens ao longo de um único eixo — uma linha ou uma coluna — e é ideal para barras de ferramentas, navegação e alinhamento de itens em uma linha. O CSS Grid é bidimensional e organiza os itens em linhas e colunas ao mesmo tempo, sendo melhor para layouts de página inteira. Este gerador é focado em Flexbox.
Por que o código gerado não inclui todas as propriedades?
O gerador exibe apenas as propriedades que diferem dos valores padrão do CSS, o que mantém o código limpo e enxuto. Se o flex-direction ficar em row (o padrão), por exemplo, ele é omitido da saída.
Posso usar o CSS gerado diretamente no meu projeto?
Sim. O CSS está pronto para produção — copie-o e aplique os nomes das classes (.container, .item-1 e assim por diante) ao seu HTML. Você pode renomear os seletores para combinar com a sua própria convenção de nomes.
Ainda não há comentários. Seja o primeiro a comentar!