Playground CSS Flexbox

Configure visualmente as propriedades do contêiner e itens CSS flexbox com uma visualização ao vivo. Gere código CSS pronto para usar com flex-direction, justify-content, align-items e mais.

Presets

Propriedades do Contêiner

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 8px

Propriedades do Item

flex-grow

flex-shrink

flex-basis

align-self

order

Visualização ao Vivo

CSS do Contêiner

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

CSS dos Itens

.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

Phone Number Formatter

Border Radius Generator

Ferramentas Relacionadas

Grid Layout Designer

CSS Animation Generator

Box Shadow Generator

Gradient Generator

NEW!

Glassmorphism Generator

UI Color Accessibility Checker

Color Scheme Generator

Pure Color Image Generator

Share this tool

Help others discover CSS Flexbox Playground

Sobre o Playground CSS Flexbox

Como Funciona

Ajuste as propriedades do contêiner como flex-direction, flex-wrap, justify-content, align-items e align-content
Adicione até 6 itens flex e configure cada um de forma independente com flex-grow, flex-shrink, flex-basis, align-self e order
Visualize seu layout em tempo real ao alterar qualquer propriedade
Copie o CSS gerado do contêiner e itens diretamente para seu projeto
Use presets para explorar rapidamente padrões flexbox comuns

Casos de Uso Comuns

Aprender propriedades de layout flexbox de forma interativa
Criar protótipos de barras de navegação, grades de cartões e barras laterais
Depurar problemas complexos de alinhamento flexbox
Gerar CSS básico para padrões de layout comuns
Ensinar conceitos de CSS flexbox a estudantes

Perguntas Frequentes

O que é o Playground CSS Flexbox?

O Playground CSS Flexbox é uma ferramenta interativa que permite configurar visualmente todas as propriedades do contêiner e itens flexbox. As alterações aparecem instantaneamente em uma visualização ao vivo e o código CSS pronto para uso é gerado automaticamente.

Quais propriedades do contêiner posso configurar?

Você pode configurar as seis propriedades principais do contêiner flex: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around) e gap (valor em pixels).

Quais propriedades posso configurar por item flex?

Cada item flex pode ser configurado com: flex-grow (quanto espaço extra o item ocupa), flex-shrink (o quanto o item encolhe quando o espaço é limitado), flex-basis (o tamanho inicial), align-self (substituição de alinhamento individual) e order (ordem visual no contêiner).

Quantos itens flex posso adicionar?

Você pode adicionar até 6 itens flex. Clique no botão '+ Adicionar Item' para adicionar mais. Cada item tem um código de cor para que você possa identificá-lo facilmente na visualização e no painel de configurações.

Como seleciono e edito um item flex específico?

Clique em qualquer aba numerada no topo do painel de Propriedades do Item para selecioná-lo. Você também pode clicar diretamente em um item na visualização ao vivo. O item selecionado será destacado com uma borda colorida.

O que são os presets e como usá-los?

Presets são configurações flexbox prontas para padrões de layout comuns: 'Linha Centralizada' centraliza itens horizontal e verticalmente, 'Coluna Centralizada' empilha itens verticalmente e os centraliza, 'Espaço Entre' distribui os itens uniformemente, 'Grade com Quebra' usa flex-wrap para que os itens quebrem em novas linhas, 'Itens Esticados' usa flex-grow para preencher o espaço disponível, e 'Linha Invertida' inverte a ordem de exibição. Clique em um preset para aplicá-lo instantaneamente.

O que faz o flex-grow?

flex-grow define quanto um item flex cresce em relação a outros itens quando há espaço extra no contêiner. Um valor de 0 significa que o item não crescerá. Um valor de 1 significa que recebe uma parcela igual do espaço extra. Um valor de 2 significa que recebe o dobro do espaço de um item com flex-grow: 1.

O que faz o flex-shrink?

flex-shrink define quanto um item flex encolhe em relação a outros itens quando não há espaço suficiente no contêiner. Um valor de 0 impede o encolhimento. Um valor de 1 (padrão) significa encolhimento proporcional. Um valor de 2 significa encolhimento duas vezes mais rápido.

Quais valores o flex-basis pode aceitar?

flex-basis define o tamanho inicial de um item flex antes de distribuir o espaço livre. Aceita: 'auto' (usa a largura ou altura do item), um valor de comprimento como '100px' ou '20%', 'content' (baseado no conteúdo) ou '0' (item começa do tamanho zero). Você pode digitar qualquer valor CSS válido.

Qual é a diferença entre align-items e align-self?

align-items é uma propriedade do contêiner que se aplica a todos os itens flex por padrão. align-self substitui align-items para um item individual. Por exemplo, se o contêiner tem align-items: center mas um item tem align-self: flex-end, todos os itens serão centralizados exceto aquele.

O que faz a propriedade order?

A propriedade order controla a ordem visual dos itens flex sem alterar a ordem do DOM. Itens com valor de order menor aparecem primeiro. O valor padrão é 0.

Como copio o CSS gerado?

Há dois botões de cópia: um para o CSS do contêiner e outro para todo o CSS. Clique em qualquer botão 'Copiar CSS' para copiar o código para a área de transferência.