BananaMaster

9 Flexbox e Aninhamento Profundo - ( 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

Um bloco alto à esquerda. À direita há três blocos idênticos empilhados um abaixo do outro. O primeiro toca a borda superior, o segundo fica centralizado, o terceiro toca a borda inferior.

• Use Flexbox aninhado.

✏️ Tarefa 2

Um card fica no centro de um container grande. Dentro do card há um bloco em cima, abaixo dois blocos lado a lado, e embaixo mais um bloco largo.

• Use Flex containers aninhados.

✏️ Tarefa 3

O container é dividido em três colunas. À esquerda há dois blocos — em cima e embaixo. No centro há um bloco no meio. À direita há três blocos idênticos empilhados um abaixo do outro.

• Use vários Flex containers.

✏️ Tarefa 4

Um bloco largo em cima. Abaixo há duas colunas. Na coluna esquerda há três blocos idênticos empilhados um abaixo do outro. Na coluna direita há um bloco alto.

• Use Flexbox aninhado.

✏️ Tarefa 5

O container é composto de duas partes. À esquerda há um bloco quadrado. À direita há duas linhas. Cada linha tem dois blocos idênticos lado a lado.

• Use vários níveis de Flexbox.
• Use apenas px para todos os tamanhos.

✏️ Tarefa 6

Um card fica no centro de um container grande. Em cima há três blocos pequenos em uma linha. No meio há um bloco largo. Embaixo há novamente três blocos pequenos em uma linha.

• Use Flexbox aninhado.

✏️ Tarefa 7

Repita o posicionamento dos blocos.

• Use vários Flex containers aninhados.
• 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.