Ferramenta para Desenvolvedores

Playground CSS Flexbox

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

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;
}

Aprendizado Visual de Flexbox

Experimente propriedades flex interativamente

Controles do Container

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

Pré-visualização ao Vivo

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

5 Predefinições de Layout

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

Copiar CSS

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

FAQ

Ferramentas para Desenvolvedores

Mais utilitários CSS

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