Campo de jogos CSS Flexbox

Crie e depure layouts flexbox visualmente com visualizações em tempo real, controles em nível de item e CSS pronto para exportação para implementação de front-end mais rápida.

CSS Flexbox Playground

Configure flex container behavior and per-item flex values visually, then export implementation-ready CSS and markup for responsive UI layouts.

Container Controls

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px)

padding (px)

Item Controls

Item 1

Label

flex-basis (px)

flex-grow

flex-shrink

Item 2

Label

flex-basis (px)

flex-grow

flex-shrink

Item 3

Label

flex-basis (px)

flex-grow

flex-shrink

Item 4

Label

flex-basis (px)

flex-grow

flex-shrink

Item 5

Label

flex-basis (px)

flex-grow

flex-shrink

Item 6

Label

flex-basis (px)

flex-grow

flex-shrink

Live Flex Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Generated Flexbox CSS + Markup

.flex-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
  padding: 12px;
}

.flex-layout__item {
  min-height: 72px;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

<div className="flex-layout">
  <div className="flex-layout__item" style={{ flex: '2 1 180px' }}>
    Item 1
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 2
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 3
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 180px' }}>
    Item 4
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 5
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 6
  </div>
</div>

Flexbox Report

CSS Flexbox Playground Report
============================
Direction: row
Wrap: wrap
Justify Content: flex-start
Align Items: stretch
Align Content: stretch
Gap: 12px
Padding: 12px
Items: 6

1. Item 1 | flex: 2 1 180px
2. Item 2 | flex: 1 1 140px
3. Item 3 | flex: 1 1 140px
4. Item 4 | flex: 1 1 180px
5. Item 5 | flex: 1 1 140px
6. Item 6 | flex: 1 1 140px

Características

Controle total do contêiner: ajuste as combinações de direção, quebra automática, espaçamento e alinhamento para explorar o comportamento prático do layout flexível para cartões, barras de ferramentas e shells de aplicativos.
Controles flexíveis por item: ajuste flex-grow, flex-shrink e flex-basis para cada item de forma independente para criar um protótipo do comportamento de distribuição real sob diferentes restrições da janela de visualização.
Visualização visual interativa: observe a renderização ao vivo enquanto edita valores para que você possa identificar rapidamente problemas de alinhamento, quebra automática e espaçamento antes de codificar os componentes finais.
Snippets prontos para exportação: copie CSS gerado e estruturas de marcação diretamente em seu projeto, reduzindo tentativas e erros ao implementar layouts flexíveis de produção.

Casos de uso

Barras de navegação: crie protótipos de padrões de navegação horizontais e agrupados com espaçamento e alinhamento equilibrados antes de integrá-los aos componentes do cabeçalho.
Painéis de painel: crie grupos de painéis que expandem e diminuem de forma previsível em tamanhos de viewport, ajustando a base de itens, taxas de crescimento e redução.
Listas de cartões: teste rapidamente linhas de cartões e pilhas verticais para escolher a direção correta e o comportamento de alinhamento para telas com muito conteúdo.
Sistemas de layout de formulário: valide como rótulos, entradas e grupos de ação se alinham e se ajustam sob restrições de largura para uma ergonomia de formulário consistente.
Revisões de design: compartilhe protótipos flexíveis concretos durante as revisões da equipe e exporte imediatamente trechos de código que correspondam ao comportamento de layout aprovado.
Treinamento de front-end: demonstre como as propriedades flexíveis interagem em tempo real para integração, workshops e sessões de depuração com desenvolvedores juniores.

Por que isso ajuda

O Flexbox é poderoso, mas geralmente requer repetidas tentativas e erros em várias propriedades. Esta ferramenta mantém controles, visualização e código gerado sincronizados para uma iteração de layout mais rápida.

Do protótipo à produção

Depois de ajustar os valores, você pode copiar trechos de CSS e de marcação em seu projeto para reduzir o tempo de implementação e preservar a intenção do layout.

Processamento Local Privado

Tudo é executado localmente no navegador, sem uploads ou login, tornando-o confiável para experimentos internos rápidos e fluxos de trabalho de equipe.

Perguntas frequentes

Você pode configurar direção flexível, quebra automática, justificar conteúdo, alinhar itens, alinhar conteúdo, lacuna e preenchimento no painel de controle.

Sim. Cada item oferece suporte a valores independentes de crescimento flexível, redução flexível e base flexível para que você possa modelar um comportamento de distribuição realista.

Sim. A ferramenta gera CSS do contêiner, além de trechos de marcação e um relatório adicional para documentação ou compartilhamento.

Sim. Você pode adicionar itens dinamicamente ou remover o último para testar diferentes tamanhos de conteúdo e condições de empacotamento.

Sim. É gratuito, não requer login e funciona inteiramente no seu navegador.

align-items controla o alinhamento do eixo cruzado de itens dentro de uma única linha. align-content controla o espaçamento entre múltiplas linhas quando o flex-wrap está habilitado e há espaço extra no eixo cruzado.

Não. É 100% gratuito, sem necessidade de inscrição. Toda a geração de layout e renderização de visualização acontecem no lado do cliente em seu navegador, sem nenhum dado enviado a nenhum servidor.