Playground CSS Flexbox

Aprenda e experimente com CSS Flexbox. Ajuste as propriedades do contêiner e observe o layout se atualizar em tempo real. Ótimo para aprender e testar layouts.

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Número de itens: 5

Pré-visualização

CSS

Funcionalidades

Painel de propriedades do contentor

Adicionar ou remover itens

Definições individuais por item

Pré-visualização do layout em direto

Gera o código CSS

Como Usar

1. Ajuste as propriedades do contêiner (direction, wrap, justify-content, align-items).

2. Adicione ou remova itens flex.

3. Veja o layout se atualizar em tempo real e copie o CSS.

Sobre esta ferramenta

O Flexbox organiza itens ao longo de um eixo — uma linha ou uma coluna — e distribui o espaço entre eles. O problema é que algumas propriedades interagem: flex-direction define o eixo principal, justify-content alinha os itens ao longo dele, align-items os alinha no eixo transversal, flex-wrap decide se eles passam para uma nova linha e gap define um espaçamento uniforme. Este playground deixa você mudar cada propriedade e ver na hora como caixas coloridas se reorganizam, que é o jeito mais rápido de ganhar intuição ou depurar um layout que não se comporta. Adicione ou remova itens para testar a quebra de linha e depois copie o CSS gerado para o contêiner. Para layouts bidimensionais, em que linhas e colunas precisam se alinhar, o CSS Grid costuma ser a ferramenta melhor.

Perguntas Frequentes

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

justify-content distribui os itens ao longo do eixo principal definido por flex-direction, e align-items os posiciona no eixo transversal. Numa linha, justify-content atua na horizontal e align-items na vertical; numa coluna, os papéis se invertem.

Por que o justify-content parece não fazer nada?

Ele só tem efeito quando sobra espaço livre no eixo principal. Se os itens já preenchem o contêiner, por exemplo porque têm flex: 1 ou uma largura grande, não sobra nada para distribuir.

Quando devo usar gap em vez de margens?

gap adiciona espaço só entre os itens, nunca nas bordas externas, e funciona tanto entre itens quanto entre linhas quebradas. É mais simples e previsível que margens, e todos os navegadores atuais o suportam no flexbox.

O que o flex-wrap muda?

Com nowrap, os itens ficam numa linha só e encolhem se necessário. Com wrap, eles passam para linhas adicionais quando falta espaço, e wrap-reverse empilha essas linhas na direção oposta.

Devo usar Flexbox ou Grid?

Use Flexbox para arranjos de uma dimensão, como barras de navegação, grupos de botões ou para centralizar conteúdo. Use Grid quando precisar de itens alinhados em linhas e colunas ao mesmo tempo, como galerias de cards ou estruturas de página.