Computação & Engenharia de Software

🌐 Capítulo 17: Layout Reativo com CSS Flexbox (Parte 1)

Leitura de 4 min

🌐 Capítulo 17: Layout Reativo com CSS Flexbox (Parte 1)

🎯 Objetivos da Aula

Ao final desta aula, você será capaz de:

  1. Compreender o modelo de layout unidimensional Flexible Box (Flexbox) do CSS3.
  2. Identificar a diferença conceitual entre o Eixo Principal (Main Axis) e o Eixo Cruzado (Cross Axis).
  3. Alinhar elementos no eixo principal com justify-content (flex-start, center, flex-end, space-between, space-around).
  4. Alinhar elementos no eixo cruzado com align-items (stretch, center, flex-start, flex-end) e espaçar com gap.

🧠 1. O Conceito do Flexbox Container e Seus Eixos

Diferente do modelo tradicional de fluxo em bloco (block/inline), ativamos o modelo flexível aplicando display: flex; no elemento pai (Flex Container). Todos os elementos filhos imediatos tornam-se Flex Items.

flowchart LR
    subgraph FlexContainer ["FLEX CONTAINER (display: flex)"]
        Item1["Flex Item 1"] --> Item2["Flex Item 2"] --> Item3["Flex Item 3"]
    end
    
    style FlexContainer fill:#e3f2fd,stroke:#1e88e5

Eixos do Flexbox:

  • Main Axis (Eixo Principal): O eixo padrão de distribuição dos itens (por padrão horizontal, flex-direction: row).
  • Cross Axis (Eixo Cruzado): O eixo perpendicular de alinhamento (por padrão vertical).

📐 2. Propriedades Principais do Flex Container

PropriedadeFunçãoValores Principais
displayAtiva o modo de layout flexívelflex / inline-flex
flex-directionDefine o sentido do eixo principalrow (linha) / column (coluna)
justify-contentAlinha os itens no eixo principalflex-start, center, flex-end, space-between, space-evenly
align-itemsAlinha os itens no eixo cruzadostretch, center, flex-start, flex-end
gapDefine o espaçamento entre itens16px, 1rem, 20px

💻 3. Prática Guiada: Navbar Corporativa com Flexbox

Let’s write a complete HTML/CSS code for a responsive header navbar using Flexbox:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Navbar Responsiva com Flexbox</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
 
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
        }
 
        /* FLEX CONTAINER DO CABEÇALHO */
        .cabeçalho-principal {
            display: flex;
            justify-content: space-between; /* Espaca logotipo e navegacao */
            align-items: center;            /* Alinha verticalmente ao centro */
            background-color: #0d47a1;
            padding: 16px 32px;
            color: #ffffff;
        }
 
        .logo h1 {
            font-size: 1.5rem;
        }
 
        /* FLEX CONTAINER DO MENU DE NAVEGAÇÃO */
        .menu-navegacao {
            display: flex;
            align-items: center;
            gap: 24px;                      /* Espacamento entre os links */
            list-style: none;
        }
 
        .menu-navegacao a {
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.2s ease-in-out;
        }
 
        .menu-navegacao a:hover {
            color: #90caf9;
        }
    </style>
</head>
<body>
 
    <header class="cabeçalho-principal">
        <div class="logo">
            <h1>Portal Acadêmico</h1>
        </div>
        <nav>
            <ul class="menu-navegacao">
                <li><a href="#">Início</a></li>
                <li><a href="#">Alunos</a></li>
                <li><a href="#">Cursos</a></li>
                <li><a href="#">Relatórios</a></li>
            </ul>
        </nav>
    </header>
 
</body>
</html>

⚔️ 4. Desafios Práticos (Exercícios 30/50/20)

🥉 Nível Bronze (Fixação)

  1. Qual a diferença entre as propriedades justify-content e align-items em um Flex Container padrão (flex-direction: row)?
  2. Para que serve a propriedade gap no Flexbox?

🥈 Nível Prata (Aplicação)

  1. Escreva o código CSS necessário para centralizar perfeitamente uma div de login no meio exato da tela (horizontal e verticalmente) utilizando apenas Flexbox.

🥇 Nível Ouro (Desafio)

  1. Crie uma barra de ferramentas corporativa contendo um título à esquerda, um campo de busca centralizado e um botão de ação “Novo Cadastro” alinhado à extrema direita usando Flexbox e a propriedade space-between ou margin-left: auto.

💡 Gabaritos Sanfonados de Resposta

💡 Ver Gabarito do Nível Bronze
  1. Em flex-direction: row, justify-content alinha os itens horizontalmente (Eixo Principal), enquanto align-items alinha os itens verticalmente (Eixo Cruzado).
  2. A propriedade gap define um espaçamento uniforme entre os Flex Items, sem necessidade de aplicar margin-right no último item.
💡 Ver Gabarito do Nível Prata (Centralização Perfeita) 
body {
    display: flex;
    justify-content: center; /* Centraliza no eixo horizontal */
    align-items: center;     /* Centraliza no eixo vertical */
    min-height: 100vh;       /* Garante altura total da tela */
    margin: 0;
}
 
.box-login {
    width: 360px;
    padding: 32px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

📚 Referências Teóricas Oficiais

⬅️ Capítulo Anterior (Posicionamento CSS) | Voltar ao Sumário | Próximo Capítulo (Flexbox Avançado e Grid) ➡️

Visão de gráfico

Backlinks