Módulo 8: Flexbox Master I

2. Resumo da Aula Anterior

No Módulo 7, aprendemos a dar vida ao site com animações e transições. Agora, vamos aprender a organizar os nossos elementos no ecrã de forma moderna e flexível com a ferramenta mais usada do CSS: o Flexbox.

3. O Que Vais Aprender Hoje

✅ Ativar o Flexbox com display: flex.
✅ O conceito de Contentor Flex e Itens Flex.
✅ Os eixos: Main Axis (Eixo Principal) e Cross Axis (Eixo Transversal).
✅ Direção dos itens (flex-direction).
✅ Quebras de linha controladas (flex-wrap).

4. Teoria: A Caixa que se Adapta

Conceito: O Flexbox foi criado para resolver o pesadelo de alinhar elementos lado a lado ou ao centro. Ao contrário do modelo antigo, o Flexbox entende o espaço disponível e distribui os itens de forma inteligente.

🍱 Analogia: A Lancheira Inteligente

Imagina uma lancheira moderna:

Contentor Flex: É a própria lancheira. Tu defines se os alimentos ficam em fila ou em coluna.
Itens Flex: São as peças de fruta e sandes. Elas podem encolher ou esticar para caber perfeitamente no espaço que a lancheira lhes dá.
Eixos: Se alinhares as uvas da esquerda para a direita, esse é o teu eixo principal. Se as empilhares, o eixo principal passa a ser de cima para baixo.

5. Exemplos Práticos

Exemplo 1: O Teu Primeiro Menu Flex

Colocar links lado a lado instantaneamente.

.menu {
  display: flex; /* Ativa a magia */
  background-color: #f4f4f4;
}

.item {
  padding: 10px 20px;
}

Só com display: flex;, os itens que antes estavam uns por cima dos outros passam a estar lado a lado.

Exemplo 2: Mudar a Direção e Quebrar Linha

Garantir que os itens não saem fora do ecrã.

.galeria {
  display: flex;
  flex-direction: row; /* Padrão: Horizontal */
  flex-wrap: wrap;     /* Passa para a linha de baixo se não couber */
}

Se usares flex-direction: column;, os itens voltam a ficar empilhados (útil para menus de telemóvel!).

6. Agora é a Tua Vez!

Cria uma "Barra de Navegação" simples:

Cria uma <div> com 4 parágrafos pequenos lá dentro.
No CSS, transforma a div num display: flex.
Muda a direção para column e vê o que acontece.
Muda de volta para row e adiciona vários parágrafos até eles saírem do ecrã.
Ativa o flex-wrap: wrap e observa-os a saltar ordenadamente para a linha seguinte.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 display: flex é aplicado no elemento PAI (o contentor).
📌 Por padrão, os itens ficam em fila (row).
📌 flex-direction muda o sentido (row ou column).
📌 flex-wrap permite que os itens ocupem várias linhas em ecrãs pequenos.

9. Desafios Práticos

Desafio 1: Inverter a Ordem

Sem mudar o HTML, como podes fazer com que o último item de uma lista apareça em primeiro lugar no ecrã usando Flexbox?

Desafio 2: O Eixo Vertical

Se definires flex-direction: column, qual passa a ser o teu Eixo Principal (Main Axis)?

Desafio 3: A Mágica do Display

O que acontece a um elemento <span> (que normalmente não aceita largura) se o colocares dentro de um contentor flex?

Aprende Web: CSS

Módulo 8: Flexbox (Parte I)