Módulo 04: HTML5 e CSS3 Moderno • Bloco 3: Layouts Modernos • Trilha em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 09.1 — Centralização Absoluta Perfeita de Elemento com Flexbox

Contexto: No CSS moderno, centralizar vertical e horizontalmente qualquer conteúdo dentro de uma seção exige apenas 3 linhas de CSS no container pai: display: flex; justify-content: center; align-items: center;.

Requisitos de Execução:

  1. Escreva uma função em Python que gere o snippet CSS de centralização para um container de altura $100\text{vh}$.
  2. Imprima o código formatado.

Resultado Esperado

=== Gerador de Centralização Perfeita (Flexbox) ===
.hero-centered {
  display: flex;
  justify-content: center; /* Centraliza no Eixo Principal (Horizontal) */
  align-items: center;     /* Centraliza no Eixo Transversal (Vertical) */
  min-height: 100vh;
}
Centralização bidirecional instantânea sem hacks!

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_1_SeuNome.py
  2. Envie na tarefa: Atividade Cap 09 - Layouts com Flexbox
🔑 Gabarito de Código & Solução Comentada 
# Atividade_09_1_Gabarito.py

def gerar_flex_center():
    code = """.hero-centered {
  display: flex;
  justify-content: center; /* Centraliza no Eixo Principal (Horizontal) */
  align-items: center;     /* Centraliza no Eixo Transversal (Vertical) */
  min-height: 100vh;
}"""
    print("=== Gerador de Centralização Perfeita (Flexbox) ===")
    print(code)
    print("Centralização bidirecional instantânea sem hacks!")

if __name__ == "__main__":
    gerar_flex_center()

🔍 Nível 2: Prática

Problema 09.2 — Distribuição Proporcional de Espaço com flex-grow

Contexto: Um container com largura total de $1000\text{px}$ contém 3 caixas filhas com base de $100\text{px}$ cada (flex-basis: 100px). As caixas possuem os seguintes fatores de crescimento: Caixa A (flex-grow: 1), Caixa B (flex-grow: 2), Caixa C (flex-grow: 1).

Requisitos de Execução:

  1. Crie uma função em Python que calcule o espaço livre restante e a largura final distribuída para cada uma das 3 caixas.
  2. Espaço livre total $= 1000 - (3 \times 100) = 700\text{px}$. Fator total $= 1 + 2 + 1 = 4$ cotas ($175\text{px}$/cota).

Resultado Esperado

=== Distribuição de Espaço Flexbox (flex-grow Engine) ===
Largura Total do Container: 1000px | Tamanho Base Inicial Total: 300px (3x 100px)
Espaço Livre Restante para Distribuição: 700px (Total de Cotas: 4)
  - Caixa A (grow=1): 100px + (1 x 175px) = 275.0px
  - Caixa B (grow=2): 100px + (2 x 175px) = 450.0px (Absorve o dobro de espaço!)
  - Caixa C (grow=1): 100px + (1 x 175px) = 275.0px
Soma Total Verificada: 1000.0px (Preenchimento perfeito do container)

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_2_SeuNome.py
  2. Envie na tarefa: Atividade Cap 09 - Layouts com Flexbox
🔑 Gabarito de Código & Solução Comentada 
# Atividade_09_2_Gabarito.py

def calcular_flex_grow(container_w: int = 1000, basis: int = 100, grows = [1, 2, 1]):
    total_basis = basis * len(grows)
    espaco_livre = container_w - total_basis
    total_cotas = sum(grows)
    valor_cota = espaco_livre / total_cotas

    print("=== Distribuição de Espaço Flexbox (flex-grow Engine) ===")
    print(f"Largura Total do Container: {container_w}px | Tamanho Base Inicial Total: {total_basis}px (3x {basis}px)")
    print(f"Espaço Livre Restante para Distribuição: {espaco_livre}px (Total de Cotas: {total_cotas})")

    larguras = []
    nomes = ["Caixa A", "Caixa B", "Caixa C"]
    for nome, g in zip(nomes, grows):
        w = basis + (g * valor_cota)
        larguras.append(w)
        extra = " (Absorve o dobro de espaço!)" if g == 2 else ""
        print(f"  - {nome} (grow={g}): {basis}px + ({g} x {valor_cota:.0f}px) = {w:.1f}px{extra}")

    print(f"Soma Total Verificada: {sum(larguras):.1f}px (Preenchimento perfeito do container)")

if __name__ == "__main__":
    calcular_flex_grow()

🚀 Nível 3: Integração

Problema 09.3 — Barra de Navegação Responsiva com justify-content: space-between

Contexto: Uma barra de navegação com Logo à esquerda e Menu à direita deve colar os dois grupos nas extremidades usando Flexbox e aplicar gap: 24px entre os links.

Requisitos de Execução:

  1. Crie a classe FlexNavbarGenerator.
  2. Emita as regras CSS do container e dos itens de menu.

Resultado Esperado

=== Gerador de Navbar com Flexbox ===
.navbar-container {
  display: flex;
  justify-content: space-between; /* Cola a Logo na esquerda e Menu na direita */
  align-items: center;            /* Alinha verticalmente no centro */
  padding: 16px 32px;
}

.nav-links {
  display: flex;
  gap: 24px;                      /* Espaço uniforme entre os links */
  list-style: none;
  margin: 0;
  padding: 0;
}
Layout de navegação moderno e fluído estruturado!

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_3_SeuNome.py
  2. Envie na tarefa: Atividade Cap 09 - Layouts com Flexbox
🔑 Gabarito de Código & Solução Comentada 
# Atividade_09_3_Gabarito.py

def gerar_navbar_flex():
    print("=== Gerador de Navbar com Flexbox ===")
    print(".navbar-container {")
    print("  display: flex;")
    print("  justify-content: space-between; /* Cola a Logo na esquerda e Menu na direita */")
    print("  align-items: center;            /* Alinha verticalmente no centro */")
    print("  padding: 16px 32px;")
    print("}\n")
    print(".nav-links {")
    print("  display: flex;")
    print("  gap: 24px;                      /* Espaço uniforme entre os links */")
    print("  list-style: none;")
    print("  margin: 0;")
    print("  padding: 0;")
    print("}")
    print("Layout de navegação moderno e fluído estruturado!")

if __name__ == "__main__":
    gerar_navbar_flex()

🏆 Nível 4: Desafio

Problema 09.4 — Simulador de Quebra de Linhas com flex-wrap: wrap e Cálculo de Linhas

Contexto: Desenvolva um motor em Python que simule o comportamento de renderização de uma galeria com $12$ cards de largura fixa de $280\text{px}$ e gap: 20px dentro de um container com largura dinâmica de viewport ($1200\text{px}$ Desktop vs $375\text{px}$ Mobile).

Requisitos de Execução:

  1. Crie a função simular_flex_wrap(container_w: int, card_w: int = 280, gap: int = 20, total_cards: int = 12).
  2. Calcule quantos cards cabem por linha e quantas linhas visuais são formadas no total.

Resultado Esperado

=== Simulador de Motor Flexbox: flex-wrap ===
[Cenário 1: Desktop - Viewport 1200px]
  - Capacidade por Linha: 4 cards (4x 280px + 3x 20px = 1180px <= 1200px)
  - Total de Linhas Geradas: 3 linhas completas (4 + 4 + 4)

[Cenário 2: Mobile - Viewport 375px]
  - Capacidade por Linha: 1 card (280px <= 375px)
  - Total de Linhas Geradas: 12 linhas empilhadas verticalmente
Motor de Wrap validado com precisão dimensional!

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_4_SeuNome.py
  2. Envie na tarefa: Atividade Cap 09 - Layouts com Flexbox
🔑 Gabarito de Código & Solução Comentada 
# Atividade_09_4_Gabarito.py
import math

def simular_flex_wrap(container_w: int, card_w: int = 280, gap: int = 20, total_cards: int = 12):
    cards_linha = max(1, (container_w + gap) // (card_w + gap))
    linhas = math.ceil(total_cards / cards_linha)
    return cards_linha, linhas

if __name__ == "__main__":
    print("=== Simulador de Motor Flexbox: flex-wrap ===")
    c1, l1 = simular_flex_wrap(1200)
    print("[Cenário 1: Desktop - Viewport 1200px]")
    print(f"  - Capacidade por Linha: {c1} cards (4x 280px + 3x 20px = 1180px <= 1200px)")
    print(f"  - Total de Linhas Geradas: {l1} linhas completas (4 + 4 + 4)\n")

    c2, l2 = simular_flex_wrap(375)
    print("[Cenário 2: Mobile - Viewport 375px]")
    print(f"  - Capacidade por Linha: {c2} card (280px <= 375px)")
    print(f"  - Total de Linhas Geradas: {l2} linhas empilhadas verticalmente")
    print("Motor de Wrap validado com precisão dimensional!")