Playground de Flexbox

Todas as ferramentas

Experimente as propriedades de CSS Flexbox em itens reais e copie o CSS de layout gerado.

Pré-visualização Clique num item para o editar
CSS gerado
—

Tudo é executado no seu navegador — nada é enviado.

Contentor
12px
Itens
0
Item selecionado

Sobre Playground de Flexbox

O Flexbox Playground é um sandbox prático para o flexbox CSS. Defina as propriedades do contêiner — flex-direction, flex-wrap, justify-content, align-items, align-content e gap — e observe até 12 itens ao vivo se reorganizarem na pré-visualização a cada valor alterado. É a forma mais rápida de internalizar o que cada propriedade realmente faz.

Os itens são editáveis individualmente: clique em um para selecioná-lo e ajustar seu flex-grow, flex-shrink, flex-basis, align-self e order. Ver um item crescer para ocupar o espaço livre enquanto seus irmãos mantêm a largura ensina o modelo de dimensionamento flex mais rápido do que qualquer diagrama.

O playground gera CSS limpo para o contêiner e para quaisquer itens com configurações não padrão — copie diretamente para sua folha de estilos. Tudo roda no seu navegador sem nenhum envio de dados, e um botão de reset o devolve a um estado limpo.

Como usar Playground de Flexbox

  1. Defina o flex-direction, wrap, justify-content, align-items, align-content e gap do contêiner.
  2. Adicione ou remova itens — entre 2 e 12 — para espelhar seu componente real.
  3. Clique em um item e ajuste seu grow, shrink, basis, align-self e order.
  4. Observe a pré-visualização ao vivo se atualizar a cada mudança.
  5. Copie o CSS gerado e cole-o no seu projeto.

Perguntas frequentes

flex-grow distribui o espaço restante: um item com grow 2 recebe o dobro do espaço extra em relação a um com grow 1. flex-shrink funciona ao contrário quando o espaço é insuficiente. Ambos são proporções entre irmãos, não tamanhos absolutos.

align-items posiciona os itens ao longo do eixo transversal dentro de sua linha. align-content espaça várias linhas quebradas dentro do contêiner — só tem efeito visível quando flex-wrap produz mais de uma linha.

Todo item flex começa com order 0 por padrão; os itens são organizados do menor order para o maior. Alterar o order de um item o move visualmente sem tocar no HTML — a sequência do DOM, e portanto a ordem de leitores de tela, permanece a mesma.

Sim. O CSS gerado abrange as regras do contêiner mais um seletor para cada item cujo grow, shrink, basis, align-self ou order difere do padrão, para que você possa colar um layout completo e funcional.

Sim — gratuito, sem cadastro e totalmente do lado do cliente. Seus experimentos nunca saem da aba do navegador.
Partilhar
Ferramentas Relacionadas
Construtor de Assinatura de E-mail Crie uma assinatura de e-mail HTML profissional a partir de 30 modelos, personalize-a e guarde-a. Gratuito
Ícone para PNG Converta Bootstrap Icons, Font Awesome e mais em imagens PNG personalizadas — gratuito, no browser. Gratuito
Gerador de ícones de app Gere um conjunto completo de ícones de app prontos a publicar para a App Store e a Google Play — fundos premium com gradientes, mesh e padrões, criados a partir do seu logo. Gratuito
Gerador de favicons Crie um pacote completo de favicons a partir de um logótipo, um ícone ou um monograma — favicon.ico, PNGs modernos, ícone Apple touch, ícones PWA, manifesto web e trecho HTML. Gratuito
Gerador de Box Shadow CSS Crie box-shadows CSS em camadas com controlos deslizantes ao vivo para desvio, desfoque, propagação, cor, opacidade e inserção — pré-visualize num elemento real e copie o CSS pronto a usar instantaneamente. Gratuito
Gerador de Border-Radius CSS Crie visualmente border-radius CSS com pré-visualização em direto e copie código pronto para produção. Gratuito
Pesquisas populares
playground de flexbox gerador de flexbox css gerador de contentor flex ferramenta justify-content align-items gerador de layout flex css visualizador de flexbox gerador de código flexbox
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.
Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.