Módulo 9: Alinhamento de Elite
2. Resumo da Aula Anterior
No Módulo 8, ativámos o Flexbox e aprendemos a controlar a direção dos itens e a quebra de linha. Agora vamos aprender a arte de alinhar tudo milimetricamente.
3. O Que Vais Aprender Hoje
- ✅ Alinhamento horizontal com justify-content.
- ✅ Alinhamento vertical com align-items.
- ✅ Criar espaço automático entre itens com gap.
- ✅ Centrar qualquer coisa perfeitamente no ecrã.
4. Teoria: Os Controladores de Espaço
Conceito: O Flexbox dá-nos o poder de decidir o que fazer com o espaço que sobra dentro de uma caixa. Podemos empurrar os itens para o centro, para as pontas, ou distribuí-los uniformemente.
👥 Analogia: O Elevador e a Foto de Família
Imagina um grupo de pessoas:
- justify-content: center: É como a foto de família onde todos se juntam no meio da sala.
- justify-content: space-between: É como pessoas num elevador que não se conhecem; cada uma vai para um canto o mais longe possível das outras.
- align-items: center: É como se todas as pessoas tivessem de alinhar o seu nariz à mesma altura, independentemente de serem altas ou baixas.
5. Exemplos Práticos
Exemplo 1: Centramento Perfeito
O "Santo Graal" do CSS resolvido em 3 linhas.
.pai {
display: flex;
justify-content: center; /* Centro horizontal */
align-items: center; /* Centro vertical */
height: 100vh; /* Altura total do ecrã */
}Qualquer coisa que coloques dentro deste "pai" ficará morto no centro do ecrã.
Exemplo 2: Espaçamento Inteligente (Gap)
Acabaram as margens chatas que estragam o último item.
.lista {
display: flex;
gap: 20px; /* Cria 20px de espaço apenas ENTRE os itens */
}O gap é melhor que a margin porque não adiciona espaço no início da lista nem no fim, apenas nos "intervalos".
6. Agora é a Tua Vez!
Vamos criar um "Header Profissional":
- Cria uma
<header>com um.logoe um.menulá dentro. - No CSS, dá um
display: flexao header. - Usa
justify-content: space-betweenpara empurrar o logo para a esquerda e o menu para a direita. - Usa
align-items: centerpara garantir que o logo e o menu estão alinhados pelo meio. - No menu (que também deve ser flex), usa
gap: 30pxpara afastar os links.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 justify-content alinha ao longo do eixo principal (horizontal por padrão).
- 📌 align-items alinha ao longo do eixo transversal (vertical por padrão).
- 📌 gap é a forma moderna de criar espaço entre elementos flex.
- 📌 Podes usar
space-aroundouspace-evenlypara variações de distribuição.
9. Desafios Práticos
Desafio 1: O Cavaleiro Solitário
Se tiveres 3 itens e quiseres que um deles "fuja" para a direita enquanto os outros ficam à esquerda, que propriedade de margem usarias nesse item específico?
Desafio 2: Múltiplas Linhas
Se usares flex-wrap: wrap e tiveres várias linhas de itens, qual a propriedade para alinhar essas LINHAS umas com as outras (e não os itens individuais)?
Desafio 3: A Diferença de Espaço
Qual a diferença visual entre space-between e space-around?