Aprofundamento em Flexbox: alinhamento, quebra e ordem
Domine justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis e a propriedade order.
Aprofundamento em Flexbox: alinhamento, quebra e ordem é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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.
Revisão: contêiner e itens flexíveis
Recapitulação: display: flex no contêiner cria itens flexíveis a partir dos filhos diretos. O eixo principal segue flex-direction. O eixo transversal é perpendicular a ele.
Valores de justify-content em detalhes
Todos os valores de justify-content em um contêiner com direção de linha: flex-start (padrão), flex-end, center, space-between (espaços apenas entre os itens), space-around (margem igual ao redor de cada item), space-evenly (espaços iguais em todos os lugares).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items versus align-content
align-items alinha os itens dentro de uma única linha. align-content alinha várias linhas (só funciona quando flex-wrap é wrap e existem várias linhas).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self em itens individuais
align-self substitui align-items para um item flexível específico. Isso é útil para fazer um item se estender enquanto os outros ficam centralizados.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap e wrap-reverse
flex-wrap: wrap permite que os itens passem para novas linhas. wrap-reverse faz a quebra, mas na direção oposta. Combine-o com gap para criar grades responsivas simples.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink, flex-basis
A abreviação flex de três partes aplicada aos itens. flex-grow: proporção do espaço disponível. flex-shrink: taxa de redução quando o espaço é limitado. flex-basis: tamanho inicial antes de aumentar ou diminuir.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Abreviações flex comuns
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (ocupa o dobro do espaço de flex: 1).
Propriedade order
order altera a ordem visual dos itens flexíveis sem modificar o HTML. O padrão é 0. Os valores negativos aparecem antes de 0. Use com cuidado — diferenças entre a ordem visual e a ordem do DOM confundem pessoas que usam o teclado ou leitores de tela.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 para corrigir transbordamentos
Os itens flexíveis têm um min-width: auto implícito, o que significa que não diminuirão para menos que o tamanho do conteúdo. Defina min-width: 0 para permitir que diminuam ainda mais — isso é essencial para truncar texto dentro de itens flexíveis.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Espaços flexíveis sem gap
Em ambientes mais antigos sem suporte a gap, use margem nos itens e margem negativa no contêiner para criar espaços entre eles. Hoje, porém, gap é compatível com todos os navegadores modernos — prefira-o.
Contêineres flexíveis aninhados
Qualquer item flexível pode ser, por si só, um contêiner flexível. Aninhe Flexbox para criar layouts complexos: uma linha de cartões em que o conteúdo interno de cada cartão também é organizado com flex. Esse é o padrão normal nos layouts modernos.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Verificação rápida
Qual propriedade distribui o espaço entre itens flexíveis ao longo do eixo transversal quando flex-wrap é wrap?
Recapitulação: Flexbox em detalhes
justify-content distribui os itens no eixo principal. align-items atua no eixo transversal de uma única linha. align-content atua no eixo transversal de várias linhas. align-self atua por item. flex-wrap: wrap habilita várias linhas. A abreviação flex controla crescimento, redução e tamanho básico. order altera a ordem visual. min-width: 0 evita problemas de redução.
Perguntas Frequentes
A aula “Aprofundamento em Flexbox: alinhamento, quebra e ordem” é grátis?
Sim — o texto completo de “Aprofundamento em Flexbox: alinhamento, quebra e ordem” é 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 “Aprofundamento em Flexbox: alinhamento, quebra e ordem”?
Domine justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis e a propriedade order. 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 1 de 4.
Quanto tempo leva a aula “Aprofundamento em Flexbox: alinhamento, quebra e ordem”?
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
- Aprofundamento em Flexbox: alinhamento, quebra e ordem
- CSS Grid: template-areas auto-fit minmax
- Combinando Flexbox e Grid
- Variáveis CSS para temas