BananaMaster

8 Flexbox e Como display: flex, flex-direction Funcionam - ( HTML e CSS, Front End )

Se esqueceu algo, clique para ir à aula

📘 Tarefas Práticas: Flexbox

Para cada tarefa, crie classes separadas em style.css e aplique-as nas tags corretas.

📌 Estrutura de arquivos: index.html + style.css

💡 Regra principal: display: flex é sempre escrito no pai, não no elemento filho.

✏️ Tarefa 1

Quatro blocos idênticos distribuídos uniformemente por toda a largura do container.

• Use apenas px para todos os tamanhos.

✏️ Tarefa 2

Três blocos empilhados um abaixo do outro e centralizados horizontalmente dentro do container.

• Escolha os tamanhos você mesmo.

✏️ Tarefa 3

Três blocos empilhados um abaixo do outro. O primeiro toca a borda superior, o segundo fica no meio, o terceiro toca a borda inferior.

• Todas as dimensões em px.

✏️ Tarefa 4

Três blocos posicionados na borda inferior do container.

• Use apenas px para todos os tamanhos.

✏️ Tarefa 5

Quatro blocos posicionados na borda inferior do container e distribuídos uniformemente.

• Use apenas px para todos os tamanhos.

✏️ Tarefa 6

Um bloco alto à esquerda. À direita — dois blocos um abaixo do outro. O de cima toca a borda superior, o de baixo — a inferior.

• Use Flexbox aninhado.

✏️ Tarefa 7

O container é composto de duas partes. À esquerda há dois blocos — um em cima, outro embaixo. À direita há um bloco, posicionado exatamente no centro.

• Use vários Flex containers.

✏️ Tarefa 8

Um card fica no centro de um container grande. Dentro do card, três blocos empilhados um abaixo do outro. O de cima toca a borda superior do card, o de baixo — a inferior, e todos os blocos estão centralizados horizontalmente.

• Use Flex containers aninhados.

✏️ Tarefa 9

Repita o posicionamento dos blocos.

• Use apenas px para todos os tamanhos.

---

Importante:

Cada classe é escrita separadamente em style.css.

Use apenas HTML e CSS.

Pratique as propriedades: display: flex, flex-direction, justify-content, align-items.