Flexbox para layouts
Use Flexbox para alinhar itens em uma linha ou coluna, distribuir espaço e quebrar o conteúdo sem soluções improvisadas com float.
Flexbox para layouts é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é o Flexbox
Flexbox (modelo de layout de caixa flexível) é um modelo de layout CSS projetado para layouts unidimensionais — distribuindo espaço ao longo de uma única linha ou coluna. Ele resolve problemas que layouts baseados em float não conseguiam tratar de forma elegante.
Ativando o Flexbox
Aplique display: flex ao container. Seus filhos diretos se tornam automaticamente itens flexíveis. Os filhos desses itens não são afetados.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
Define o eixo principal. row (padrão): itens organizados da esquerda para a direita. row-reverse: da direita para a esquerda. column: de cima para baixo. column-reverse: de baixo para cima.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — alinhamento no eixo principal
Distribui o espaço ao longo do eixo principal. flex-start (padrão), flex-end, center, space-between, space-around, space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — alinhamento no eixo transversal
Alinha os itens ao longo do eixo transversal (perpendicular ao eixo principal). stretch (padrão), center, flex-start, flex-end, baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}Propriedade gap
gap: row-gap column-gap adiciona espaço entre itens flexíveis sem usar margin. É muito mais limpo do que o truque da margin. É amplamente compatível com os navegadores modernos.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
Por padrão, os itens flexíveis são comprimidos em uma única linha. flex-wrap: wrap permite que eles passem para novas linhas quando não couberem. Combine-o com gap para criar uma grade responsiva simples.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}A abreviação flex nos itens
flex: grow shrink basis nos itens flexíveis. flex: 1 é uma abreviação de 1 1 0% — os itens crescem igualmente e ignoram o tamanho do conteúdo. flex: 0 0 200px cria um item fixo de 200px.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
align-self em um item flexível substitui o align-items do container para esse item específico. É útil para fazer um item ser alinhado de maneira diferente de seus irmãos.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }Propriedade order
order controla a ordem visual dos itens flexíveis sem alterar a ordem do HTML. O padrão é 0. Valores menores aparecem primeiro. Use com moderação — isso cria uma divergência entre a ordem visual e a ordem do DOM ou de leitura.
Centralizando com Flexbox
A maneira mais simples de centralizar um element horizontal e verticalmente: defina o pai como display: flex; justify-content: center; align-items: center.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}Verificação rápida
Qual propriedade do Flexbox distribui o espaço entre os itens ao longo do eixo principal?
Recapitulação: fundamentos do Flexbox
display: flex no container. flex-direction: row ou column para definir o eixo. justify-content para o espaçamento no eixo principal. align-items para o eixo transversal. gap para os espaços entre itens. flex-wrap para várias linhas. A abreviação flex nos itens para controlar o crescimento. Um sistema de layout unidimensional versátil.
Perguntas Frequentes
A aula “Flexbox para layouts” é grátis?
Sim — o texto completo de “Flexbox para layouts” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Flexbox para layouts”?
Use Flexbox para alinhar itens em uma linha ou coluna, distribuir espaço e quebrar o conteúdo sem soluções improvisadas com float. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Flexbox para layouts”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- A tag meta viewport
- Flexbox para layouts
- CSS Grid para layouts
- Consultas de mídia e desenvolvimento mobile-first