BananaMaster

7 Flexbox e Como display: flex, justify-content, align-items e 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 — flex-direction: row (padrão)

Três blocos em uma linha. Estime o tamanho do pai visualmente:

• Pai — fundo: red, dimensões em px, adicione display: flex
• Filho 1 — fundo: #e74c3c, dimensões em %
• Filho 2 — fundo: #3498db, dimensões em %
• Filho 3 — fundo: #2ecc71, dimensões em %
• Filho 4 — fundo: #2c3e50, dimensões em %
• 💡 flex-direction: row é o valor padrão — não precisa ser escrito

✏️ Tarefa 2

Três blocos em uma coluna. Estime o tamanho do pai visualmente:

• Pai — fundo: green, dimensões em px
• Filho 1 — fundo: #f39c12, dimensões em %
• Filho 2 — fundo: #e74c3c, dimensões em %
• Filho 3 — fundo: #1abc9c, dimensões em %
• Filho 3 — fundo: #8e44ad, dimensões em %

✏️ Tarefa 3

O bloco está alinhado ao centro horizontalmente. Estime os tamanhos visualmente:

• Pai — fundo: #2d3436, dimensões em px
• Filho — fundo: #fdcb6e, dimensões em %

✏️ Tarefa 4

O bloco está alinhado à borda direita. Estime os tamanhos visualmente:

• Pai — fundo: #00b894, dimensões em px
• Filho — fundo: #d63031, dimensões em %

✏️ Tarefa 5

O bloco está alinhado ao centro vertical. Estime os tamanhos visualmente:

• Pai — fundo: #6c5ce7, dimensões em px
• Filho — fundo: #fd79a8, dimensões em %

✏️ Tarefa 6

O bloco está alinhado à borda inferior. Estime os tamanhos visualmente:

• Pai — fundo: #0984e3, dimensões em px
• Filho — fundo: #ffeaa7, dimensões em %

✏️ Tarefa 7

O bloco está posicionado exatamente no centro tanto horizontal quanto verticalmente. Estime os tamanhos visualmente:

• Pai — fundo: #e17055, dimensões em px
• Filho — fundo: #74b9ff, dimensões em %

✏️ Tarefa 8

Três blocos — os externos pressionados nas bordas, o do meio entre eles. Todos centralizados verticalmente. Estime os tamanhos visualmente:

• Pai — fundo: #2c3e50, dimensões em px
• Filho 1 — fundo: #e74c3c, dimensões em %
• Filho 2 — fundo: #f1c40f, dimensões em %
• Filho 3 — fundo: #2ecc71, dimensões em %

✏️ Tarefa 9

Uma coluna de dois blocos alinhada ao canto inferior direito. Estime os tamanhos visualmente:

• Pai — fundo: #6c5ce7, dimensões em px
• Filho 1 — fundo: #fd79a8, dimensões em %
• Filho 2 — fundo: #00cec9, dimensões em %

✏️ Tarefa 10

Dois flex containers aninhados dentro de um. Estime os tamanhos visualmente:

• Pai externo — fundo: #dfe6e9, dimensões em px, display: flex, justify-content: space-between
• Bloco esquerdo — fundo: #b2bec3, largura em %, ele mesmo é um flex container: flex-direction: column, justify-content: space-between
• Esquerdo → Filho 1 — fundo: #e74c3c, dimensões em %
• Esquerdo → Filho 2 — fundo: #3498db, dimensões em %
• Bloco direito — fundo: #2d3436, largura em %, ele mesmo é um flex container: justify-content: center, align-items: center
• Direito → Filho — fundo: #fdcb6e, dimensões em %

📌 Importante:
Cada classe é escrita separadamente em style.css.
Use apenas HTML e CSS.
Pratique as propriedades: display: flex, flex-direction, justify-content, align-items.