📊 Capítulo 09: Layout com Flexbox

Módulo 04: HTML5 e CSS3 Moderno

🗺️ O Modelo Mental dos Eixos Flexbox

flowchart LR
    MAIN["1. Eixo Principal (Main Axis)\n(Controlado por justify-content)"] --> CROSS["2. Eixo Transversal (Cross Axis)\n(Controlado por align-items)"] --> GROW["3. Flex Items\n(grow, shrink, basis, flex: 1)"]

    style MAIN fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style CROSS fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style GROW fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px

🎯 Slide 1: Flex Container

• display: flex: Habilita o contexto flexível para todos os filhos diretos.

• flex-direction: row (horizontal padrão) ou column (vertical).

• gap: Espaçamento limpo e automático entre os itens.

🎯 Slide 2: Alinhamento e Distribuição

• justify-content: center, space-between, space-evenly, flex-start, flex-end.

• align-items: Alinha itens no eixo perpendicular (center, stretch, flex-start).

• flex-wrap: wrap: Permite quebra fluida para a linha seguinte em telas menores.

🎯 Slide 3: O Shorthand flex: 1

• flex-grow: Proporção de espaço livre absorvida.

• flex-shrink: Fator de contração quando o espaço falta.

• flex-basis: Largura ou altura base antes do cálculo de crescimento.