Playground de flexbox

Todas as ferramentas para desenvolvedores Gratuito

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
Ícone para PNG
Gerador de ícones de app
Gerador de favicons
Gerador de box shadow CSS
Gerador de border-radius CSS
Gerador de gradientes CSS
Gerador de glassmorphism
Gerador de neumorphism
Playground flex do Bootstrap
Playground de grade Bootstrap
Playground de CSS Grid
Editor de suavização Cubic-Bézier
Gerador de dados falsos
Gerador de código QR
Leitor de códigos QR
Quadro branco online
Gerador de código de barras
Criador de gráficos
Gerador de UUID / ULID
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.