Editor de Flexbox

O que é um editor visual de Flexbox?#

Flexbox é o motor de layout do CSS para organizar elementos ao longo de uma única direção (uma linha ou uma coluna) e distribuir o espaço livre entre eles. Ele responde a perguntas que antes exigiam floats, margens negativas e tentativa e erro: “como centralizo isto verticalmente?”, “como faço estas três colunas com a mesma altura?”, “como empurro um item para a extrema direita enquanto os outros ficam à esquerda?”. Depois de entendê-lo, você o usa em quase todas as páginas; até então, os nomes das propriedades (justify-content, align-items, flex-grow) atrapalham até desenvolvedores experientes, porque a especificação sobrecarrega palavras comuns do inglês com significados de layout muito precisos.

Esta página é um playground ao vivo de Flexbox. Você ajusta as propriedades do contêiner e as sobreposições por item na barra lateral esquerda; o painel direito mostra o resultado instantaneamente e escreve o CSS exato, pronto para copiar e colar, que o produziu. A ideia é parar de adivinhar qual valor faz o quê e, em vez disso, ver o efeito no momento em que você o altera — depois copiar a regra que funcionou.

Como usar#

O layout está dividido numa barra lateral de controles e num painel de prévia + saída CSS.

1. Configure o contêiner. Use os menus suspensos na barra lateral:
   • Direção — row, row-reverse, column, column-reverse.
   • Justify content — distribui o espaço livre ao longo do eixo principal: flex-start, center, flex-end, space-between, space-around, space-evenly.
   • Align items — dispõe os filhos ao longo do eixo transversal: stretch, flex-start, center, flex-end, baseline.
   • Wrap — nowrap mantém tudo numa linha; wrap e wrap-reverse permitem que os filhos fluam para novas linhas.
   • Align content — aparece apenas quando o wrap está ativo; ele espaça as linhas de filhos que transbordaram.
   • Espaçamento — um controle deslizante de 0 a 64 px; o valor atual é lido ao lado do rótulo.
2. Gerencie os itens. Sob o cabeçalho Itens, Adicionar item insere outro filho flex. Cada linha de item expõe Grow, Shrink, Basis, Ordem e Align self (uma sobreposição por filho do align-items do contêiner). Exclua um filho com o seu botão de excluir.
3. Acompanhe a prévia. A caixa grande à direita é um contêiner flex real — toda mudança é redesenhada imediatamente.
4. Copie o CSS. O bloco de regras gerado fica sob a prévia. Clique em Copiar para pegá-lo. Quando todos os itens compartilham os mesmos valores, um único bloco .item é emitido; no momento em que qualquer item difere, a saída passa a um bloco .item:nth-child(N) por filho, para que cada sobreposição permaneça sem ambiguidade.

Principais funcionalidades#

• Propriedades do contêiner e por filho num único lugar. Nada do Flexbox está oculto — flex-direction, ambos os eixos de alinhamento, wrap, Espaçamento e, por item, grow/shrink/basis/order/align-self estão todos ao vivo.
• Saída CSS correta e mínima. align-content só é emitido quando o wrap está de fato ativado (ele não faz nada numa única linha); itens iguais colapsam num bloco; order e align-self aparecem apenas quando não são o padrão. A saída é a regra mais curta que reproduz o que você vê.
• O atalho flex, feito direito. Cada filho serializa como flex: <grow> <shrink> <basis> — a forma canônica de três valores que evita os padrões surpreendentes dos valores omitidos do atalho.
• Basis validado. Digite auto, 0, 200px, 50% ou 10rem e ele é aceito; um basis inválido é sinalizado e reverte para auto em vez de produzir silenciosamente um CSS quebrado.
• Prévia forçada à esquerda para a direita. O row do Flexbox é definido com semântica da esquerda para a direita, então a prévia é fixada LTR independentemente do idioma da página — o que você vê corresponde ao que o seu stylesheet fará.

Exemplo prático#

Um layout comum: uma linha de cabeçalho com um logo fixo à esquerda, um título que ocupa o espaço restante e uma ação fixa à direita — uniformemente espaçados com uma margem fixa.

• Direção: row
• Justify content: space-between
• Align items: center
• Wrap: nowrap
• Espaçamento: 16px
• Itens: três filhos, o do meio com Grow 1 para absorver o espaço livre, os outros no padrão flex: 0 1 auto.

O CSS gerado:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

Como o segundo filho cresce e os outros não, a saída usa corretamente três blocos nth-child separados. Solte isto em qualquer projeto e o logo gruda na borda esquerda, a ação gruda na direita e o título preenche o meio — sem floats, sem margens.

FAQ#

justify-content vs align-items — qual é qual?#

justify-content sempre trabalha ao longo do eixo principal (a direção que flex-direction define — horizontal num row, vertical num column). align-items sempre trabalha ao longo do eixo transversal (perpendicular ao eixo principal). Então num row, justify-content controla o espaçamento esquerda/direita e align-items controla o alinhamento cima/baixo. Inverta a direção para column e eles trocam de papel. Lembrar de “justify = principal, align = transversal” evita a confusão de Flexbox mais comum.

Quando é que o flex-grow de fato faz alguma coisa?#

Apenas quando há espaço livre para absorver. Se três filhos têm cada um flex-grow: 1 e o contêiner é mais largo do que os filhos precisam, o espaço restante é dividido em terços e adicionado igualmente. Se o contêiner está exatamente cheio, nada cresce. Defina flex-grow: 0 (o padrão) e um filho se recusa a expandir, deixando os irmãos ocuparem o espaço. flex-shrink é o espelho: ele decide quem abre mão de espaço primeiro quando não há espaço suficiente.

Por que o meu Espaçamento não aparece?#

Três causas habituais: os filhos têm uma largura fixa que preenche o contêiner completamente (sem espaço para a margem), flex-wrap: nowrap está forçando os filhos a transbordar em vez de quebrarem para o layout ciente de margem, ou uma margem nos filhos está mascarando visualmente o espaçamento. O controle aqui vai até 64 px; se você precisa de mais, a propriedade subjacente aceita qualquer comprimento, então copie o CSS e aumente o gap no seu próprio arquivo.

A saída usa nth-child — posso usar uma classe em vez disso?#

Claro. Os seletores .item:nth-child(N) são emitidos porque mapeiam sem ambiguidade para a prévia quando os itens diferem. Em código real, troque-os pelas suas próprias classes (.logo, .title, .action) — as declarações internas permanecem idênticas. Quando todos os filhos coincidem, a ferramenta já emite um único bloco .item compartilhado que você pode renomear num só lugar.