Playground Flexbox
Experimente com CSS Flexbox visualmente.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Playground Flexbox CSS: aprenda e experimente visualmente
CSS Flexbox é o sistema de layout mais importante para design web moderno, permitindo alinhar e distribuir espaço entre itens de um container de forma flexível e responsiva. Nosso playground visual permite experimentar com todas as propriedades Flexbox e ver os resultados instantaneamente, facilitando a aprendizagem e a prototipagem.
A ferramenta cobre todas as propriedades do container (flex-direction, justify-content, align-items, flex-wrap, gap) e dos itens (flex-grow, flex-shrink, flex-basis, order, align-self). Cada propriedade tem uma descrição e ao alterá-la, o layout se atualiza instantaneamente, permitindo entender intuitivamente como cada propriedade afeta a disposição.
É a ferramenta perfeita para desenvolvedores que estão aprendendo Flexbox, para prototipar layouts rapidamente antes de codificá-los, ou para resolver problemas específicos de alinhamento e distribuição. O código CSS gerado pode ser copiado diretamente para seu projeto. Flexbox é compatível com todos os navegadores modernos.
Perguntas frequentes
Quando devo usar Flexbox vs Grid?
Flexbox é ideal para layouts unidimensionais (uma linha ou uma coluna), como barras de navegação, listas de cards horizontais ou alinhamento de elementos dentro de um container. CSS Grid é melhor para layouts bidimensionais (linhas e colunas simultaneamente), como layouts de página completa ou galerias complexas.
O que faz o flex-grow?
flex-grow define quanto um item pode crescer para preencher o espaço disponível no container. Um valor de 0 (padrão) significa que o item não cresce. Se um item tem flex-grow: 1 e outro flex-grow: 2, o segundo crescerá o dobro do primeiro.
É compatível com todos os navegadores?
Sim, CSS Flexbox tem suporte completo em todos os navegadores modernos há anos. Chrome, Firefox, Safari, Edge e Opera o suportam sem necessidade de prefixos. Apenas Internet Explorer 10-11 tinha uma implementação parcial e com bugs.
Quer saber mais? Leia nosso guia completo →