Área de testes CSS Flexbox
Área de testes interativa para aprender e gerar layouts Flexbox
Configurações do layout
Layouts predefinidos
Ajustes individuais por item
Selecione um item na prévia ou na lista para editar suas propriedades.
Referência rápida de Flexbox
Eixo principal
justify-content controla o alinhamento ao longo do eixo principal (determinado por flex-direction).
Eixo transversal
align-items controla o alinhamento ao longo do eixo transversal (perpendicular a flex-direction).
Várias linhas
align-content só se aplica quando flex-wrap está definido como wrap ou wrap-reverse com várias linhas.
Prévia em tempo real
CSS gerado
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Altere as configurações ou selecione um item. A prévia e o CSS são atualizados juntos.
Sobre a área de testes CSS Flexbox
A área de testes CSS Flexbox é uma ferramenta visual e interativa para aprender e experimentar layouts com CSS Flexbox. O Flexbox (Flexible Box Layout) é um dos módulos de layout CSS mais poderosos e usados, projetado para organizar itens dentro de um contêiner com comportamento flexível e responsivo. Esta ferramenta permite manipular em tempo real todas as propriedades do contêiner e dos itens flex e ver exatamente como o seu layout muda.
Principais recursos
- Controle total de todas as propriedades do contêiner flex: flex-direction, flex-wrap, justify-content, align-items, align-content e gap
- Substituições por item: order, flex-grow, flex-shrink, flex-basis e align-self
- Visualização visual ao vivo com itens coloridos e numerados e um limite tracejado do contêiner
- Layouts predefinidos, incluindo Barra de navegação, Grade de cards, Holy Grail, Conteúdo centralizado e Layout com barra lateral
- Código CSS gerado automaticamente, com cópia em um clique
- Controle dinâmico da quantidade de itens, de 1 a 12
- Seleção de itens por clique para editar as propriedades de cada item
- Suporte ao modo escuro para usar com conforto em qualquer condição de iluminação
Entendendo as propriedades do Flexbox
O Flexbox trabalha em dois eixos: o eixo principal (definido por flex-direction) e o eixo transversal (perpendicular ao eixo principal). A propriedade justify-content distribui o espaço ao longo do eixo principal, enquanto align-items cuida do alinhamento no eixo transversal. Quando flex-wrap permite a quebra em várias linhas, align-content controla o espaçamento entre essas linhas. Cada item flex pode substituir seu alinhamento com align-self, controlar suas proporções de crescimento e encolhimento e definir um tamanho base com flex-basis.
Padrões comuns de layout com Flexbox
O Flexbox é excelente para criar barras de navegação, centralizar conteúdo na horizontal e na vertical, criar grades de cards que se reorganizam de forma responsiva, montar layouts com barra lateral fixa e conteúdo principal fluido e implementar o clássico layout Holy Grail, com áreas de cabeçalho, rodapé, barra lateral e conteúdo principal. Use os botões de predefinições para ver esses padrões em ação na hora.
Para quem é esta ferramenta?
- Desenvolvedores web que estão aprendendo CSS Flexbox pela primeira vez
- Engenheiros de frontend que prototipam layouts responsivos com rapidez
- Designers de UI/UX que querem visualizar layouts flex antes de escrever o código
- Estudantes que estudam técnicas de layout CSS para aulas ou entrevistas
- Educadores que demonstram conceitos de Flexbox em workshops ou salas de aula
- Qualquer pessoa que precise gerar rapidamente CSS Flexbox para seus projetos