Módulo 04: HTML5 e CSS3 Moderno • Bloco 3: Layouts Modernos: Flexbox & CSS Grid

🗺️ Mapa Conceitual do Capítulo

flowchart TD
    FLEX["O Motor do CSS Flexbox (Unidimensional)"]
    FLEX --> CONTAINER["1. Propriedades do Flex Container\n(display: flex, flex-direction: row/column, justify-content, align-items, flex-wrap, gap)"]
    FLEX --> ITEMS["2. Propriedades dos Flex Items\n(flex-grow, flex-shrink, flex-basis / shorthand flex: 1, align-self, order)"]
    FLEX --> AXES["3. Eixo Principal vs Eixo Transversal\n(Main Axis vs Cross Axis / Alinhamentos Dinâmicos e Espaçamento)"]

    style FLEX fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style CONTAINER fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style ITEMS fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style AXES fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px

📐 1. O Modelo Unidimensional e os Dois Eixos

O Flexbox foi projetado para distribuir espaço e alinhar itens ao longo de uma única dimensão por vez (uma linha ou uma coluna):

  • Eixo Principal (Main Axis): Determinado pela propriedade flex-direction (row = horizontal da esquerda para a direita; column = vertical de cima para baixo).
  • Eixo Transversal (Cross Axis): O eixo perpendicular ao principal.
flowchart LR
    subgraph ROW["flex-direction: row"]
        M1["Eixo Principal (Main Axis) ➔ (Alinhado por justify-content)"]
        C1["Eixo Transversal (Cross Axis) ⬇ (Alinhado por align-items)"]
    end

    style ROW fill:#f8fafc,stroke:#94a3b8,stroke-width:1px

🎛️ 2. Controles do Flex Container

  • justify-content (Alinha no Eixo Principal):
    • flex-start, flex-end, center
    • space-between (espaço máximo entre os itens, colando nas pontas).
    • space-around (espaço igual ao redor de cada item).
    • space-evenly (espaço perfeitamente uniforme entre todos os itens e as margens).
  • align-items (Alinha no Eixo Transversal):
    • stretch (padrão - estica para preencher a altura), center, flex-start, flex-end, baseline.
  • gap: Define a distância entre itens sem necessidade de hacks com margens negativas.
  • flex-wrap: wrap: Permite que os itens quebrem linha quando não houver espaço horizontal suficiente.

📦 3. Controles dos Flex Items

  • flex-grow (Fator de Crescimento): Determina quanto espaço livre o item deve absorver (ex.: flex-grow: 1 faz o item ocupar todo o espaço restante).
  • flex-shrink (Fator de Encolhimento): Determina como o item encolhe quando o espaço é insuficiente.
  • flex-basis (Tamanho Base Inicial): O tamanho padrão do item antes da distribuição de espaço livre (ex.: flex-basis: 250px).
  • Shorthand Recomendado: flex: 1 $\equiv$ flex: 1 1 0%.

🔗 Recursos Pedagógicos do Capítulo 09

Recurso Didático Finalidade Link de Acesso
📊 Slides de Aula Apresentação visual interativa com diagramas de eixos e propriedades Flexbox Ver Slides
🧠 Quiz Formativo Teste de fixação com feedback imediato por alternativa Fazer Quiz
💻 Exemplos de Código Barra de navegação responsiva e galeria de cards com Flexbox e gap Ver Exemplos
🧩 Exercícios em 4 Níveis Lista progressiva com gabarito oficial colapsável Resolver Exercícios
⬅️ Capítulo Anterior: Bloco 2 Sumário do Módulo Próximo Capítulo ➡️