Contentor Flex CSS
A intro ao Flexbox transformou pais em contentores. Esta lição fica no contentor: escolha o eixo principal, distribua o espaço, alinhe no eixo cruzado e envolva linhas. O crescimento do item (flex-grow, flex-basis) espera por Flex Items.
Um kit de ferramentas do contentor flex
📊 Contentor flex num relance
| Propriedade | Trabalho do dia a dia |
|---|---|
flex-direction |
Define o eixo principal: row, column ou variantes reverse |
justify-content |
Distribui itens ao longo do eixo principal |
align-items |
Alinha itens no eixo cruzado (uma linha) |
flex-wrap |
Permite que itens passem para novas linhas |
align-content |
Empacota várias linhas flex no eixo cruzado |
gap |
Espaça itens (e linhas) sem lutas de margin |
Lembre-se: justify segue o eixo principal; align segue o cruzado. Mude flex-direction para column e esses papéis rodam com os eixos.
flex-direction — escolha o eixo principal
O padrão é row. Use column para pilhas verticais como navs laterais ou grupos de formulário. Variantes reverse invertem a ordem visual — confira se a ordem de leitura continua sensata.
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
justify-content — distribuição no eixo principal
Distribua o espaço livre ao longo do eixo principal: flex-start, center, flex-end, space-between, space-around, space-evenly. Headers costumam querer space-between.
.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}
align-items — alinhamento no eixo cruzado
Numa única linha, align-items controla altura/posição vertical numa row (ou horizontal numa column). stretch é o padrão; center é a cola diária de UI.
.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
Wrap e align-content
Com flex-wrap: wrap, itens a mais formam novas linhas. align-content empacota essas linhas quando há espaço livre no eixo cruzado — faz pouco se o wrap for nowrap.
.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}
Um hábito calmo de contentor
Defina direction primeiro, depois justify, depois align-items, depois wrap se preciso. Mantenha gap para gutters. Guarde o crescimento por item para a próxima lição — e deixe grelhas 2D de página para CSS Grid depois.
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Experimente você
- Monte um
.stackcomflex-direction: columne três blocos. - Compare
justify-content: space-betweenvscenternuma barra larga. - Aumente
min-heighte testealign-items: stretchvscenter. - Envolva chips e veja
align-content: flex-start. - Escreva uma frase: quais propriedades vão nos items a seguir, não no contentor?
Erros comuns
- Trocar mentalmente justify e align depois de mudar a direção
- Usar
row-reversesem verificar ordem de teclado/leitura - Esperar que
align-contentimporte comnowrap - Colocar
flex-growno contentor em vez de num item - Pedir às props de contentor Flexbox um layout Grid 2D completo
Resumo
- Props do contentor guiam direção, distribuição, alinhamento e wrap
flex-directiondefine o eixo principaljustify-contentvsalign-itemsseguem principal vs cruzado- Wrap ativa pacotes multilinha;
align-contentempacota essas linhas - Crescimento ao nível do item espera pela lição Flex Items
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo