CSS Flexbox Playground

Construa e visualize layouts flexbox de forma interativa. Ajuste as propriedades do contêiner e dos itens com prévia ao vivo.

Como funciona: Ajuste as propriedades do contêiner e dos itens para construir seu layout flexbox. Veja as mudanças instantaneamente na prévia. Copie o CSS gerado quando estiver pronto.

12px
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  gap: 12px;
}

O que é CSS Flexbox?

CSS Flexbox (Flexible Box Layout) é um método de layout unidimensional para organizar itens em linhas ou colunas. Oferece poderosas capacidades de alinhamento e distribuição dinâmica de espaço, tornando-se a escolha principal para layouts de componentes, barras de navegação e designs responsivos.

Como Usar o Flexbox Playground

Comece ajustando as propriedades do contêiner: flex-direction controla o eixo principal, justify-content distribui espaço ao longo dele, e align-items posiciona os filhos no eixo cruzado. Adicione ou remova itens filhos e personalize seus valores individuais de flex-grow, flex-shrink e flex-basis para ver como respondem ao espaço disponível.

Flexbox vs. CSS Grid

Flexbox é projetado para layouts unidimensionais — seja uma linha ou uma coluna. CSS Grid lida com layouts bidimensionais com linhas e colunas simultaneamente. Use Flexbox para layouts no nível de componente (navbars, fileiras de cards, controles de formulário) e Grid para layouts no nível de página. Funcionam muito bem juntos.

Padrões Comuns de Flexbox

  • Conteúdo centralizado: justify-content e align-items configurados em center
  • Layout com sidebar: um item com largura fixa, outro com flex-grow: 1
  • Barra de navegação: direção row com space-between
  • Holy grail: header, footer e corpo de três colunas usando flex aninhado
  • Colunas iguais: todos os filhos com flex: 1
  • Wrap responsivo: flex-wrap com flex-basis baseado em porcentagens