Desenvolvedor

Playground de CSS Flexbox Gratuito

Aprenda e experimente com CSS Flexbox visualmente. Ajuste propriedades do container, veja itens responderem em tempo real e copie o CSS gerado. Sem cadastro.

100% gratuito — nenhuma conta necessária

Controles do Container
Controles dos Itens

Item 1

Item 2

Item 3

Pré-visualização
1
2
3
4
CSS Gerado
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Recursos de Playground de CSS Flexbox Gratuito

Experimente propriedades flex interativamente

Controles do Container

Direction, justify-content, align-items, wrap e gap — todos ajustáveis.

Copiar CSS

CSS gerado para o container pronto para usar no seu projeto.

5 Predefinições de Layout

Layouts centralizado, navbar, sidebar, tipo grid e footer.

Pré-visualização ao Vivo

Veja itens flex coloridos responderem às suas mudanças em tempo real.

FAQ

Quando devo usar Flexbox vs Grid?

Flexbox é melhor para layouts unidimensionais (linhas OU colunas). Grid é para layouts bidimensionais (linhas E colunas). Muitos layouts usam ambos.

O que flex-wrap faz?

Por padrão, itens flex ficam em uma linha e encolhem. flex-wrap: wrap permite que itens fluam para a próxima linha quando não cabem.

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

justify-content alinha itens ao longo do eixo principal (horizontal em row, vertical em column). align-items alinha ao longo do eixo cruzado (perpendicular).

Gostando das nossas ferramentas gratuitas?

Mais utilitários CSS

Gradiente CSS, box shadow, conversor Tailwind e muito mais.

Ver todas as ferramentas