Playground Flexbox

Crie um layout flex e copie o CSS exato.

Visualize direção, quebra, espaçamento e alinhamento em um só lugar. Cada controle atualiza o exemplo ao vivo, explica a propriedade e gera código inicial limpo.

Controles do contêiner Altere flex-direction, justify-content, align-items, align-content e gap.
Controles de itens Ajuste flex-grow, flex-shrink, flex-basis e align-self para qualquer item.

Gerador de Flexbox

Use predefinições para padrões comuns ou ajuste cada propriedade diretamente. As entradas são limitadas a intervalos seguros para evitar CSS inválido ou erros de renderização.

Fluxo do eixo principal para os itens.
Permitir várias linhas quando o espaço acabar.
Distribuir itens ao longo do eixo principal.
Alinhar itens através do eixo transversal.
Afeta apenas layouts com várias linhas (wrap).
Útil ao testar o alinhamento vertical.
0px 16px
1 4 itens

Item selecionado

Clique em qualquer item da visualização para editá-lo individualmente. Os valores são validados antes da geração do código.

0 1
0 1
Pixels. Use 0 para tamanho baseado no conteúdo.
Substitui o alinhamento do contêiner para este item.

Visualização ao vivo

O contêiner abaixo é atualizado imediatamente. Os rótulos resumem qual eixo está atuando como a direção principal para que você possa entender a lógica.

Eixo principal: horizontal. Eixo transversal: vertical.
display: flex; gap: 16px; Layout de linha única.

Saída pronta para copiar

O CSS inclui apenas as propriedades representadas na ferramenta. Os rótulos HTML usam nomes de classes semânticos para facilitar a integração.


          


          

            
            

          

        

      


      

        

          

            
Como funciona

            
Flexbox organiza os filhos diretos de um contêiner flex através de um eixo principal e um eixo transversal. Abaixo explicamos os pontos de confusão mais comuns.

          

        


        

          

            
1. Direção define o eixo principal

            
row torna o eixo principal horizontal. column o torna vertical. Quando isso muda, justify-content e align-items parecem trocar de lugar pois seguem a lógica do eixo.

          

          

            
2. Quebra adiciona controle de linha

            
Quando flex-wrap é nowrap, align-content não tem efeito. Ele só importa quando os itens formam várias linhas e há espaço extra entre elas.

          

          

            
3. Valores dos itens afetam a negociação

            
flex-grow controla como o espaço extra é dividido, flex-shrink controla como os itens encolhem e flex-basis é o tamanho inicial de partida.

          

        

        
Premissas: os valores de base usam pixels, os gaps usam pixels inteiros e a visualização reflete o comportamento dos navegadores modernos. Arredondamentos visam facilitar a leitura.

      


      

        

          

            
Referência rápida de propriedades

            
Use isto como uma consulta rápida após testar layouts no gerador.

          

        


        

          

            
justify-content

            
Move os itens ao longo do eixo principal. Ótimo para menus, grupos de botões e distribuição de espaços em linhas.

          

          

            
align-items

            
Controla o alinhamento no eixo transversal para todos os itens. Use quando as alturas dos itens parecerem desiguais.

          

          

            
align-self

            
Substitui o alinhamento transversal para um único item sem alterar os demais membros do grupo.