DS & II

capitulo_18_flexbox_p2

Leitura de 2 min

Capítulo 18: Manobras Táticas (Flexbox P2) 🔄🛡️

Neste capítulo, vamos aprofundar nossos conhecimentos em Flexbox e aprender a mudar a direção dos elementos (de linha para coluna) e como fazê-los quebrar de linha, usando o tema Manobras de Combate!

📖 Direção e Quebra (Wrap)

Por padrão, o Flexbox coloca tudo em uma linha (row). Mas podemos mudar isso:

  • flex-direction: column;: Coloca os elementos um embaixo do outro (em coluna).
  • flex-wrap: wrap;: Se os elementos não couberem na mesma linha, eles quebram para a linha de baixo (em vez de esmagarem).

Essas duas propriedades juntas são super poderosas para criar sites que funcionam no celular (Design Responsivo)!

📖 Exemplo Guiado: Galeria Responsiva

Vamos criar uma lista de itens que quebra de linha se a tela for pequena.

  1. Crie o arquivo galeria_flex.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Galeria Flex</title>
    <link rel="stylesheet" href="galeria.css">
</head>
<body>
    <div class="galeria">
        <div class="quadro">Quadro 1</div>
        <div class="quadro">Quadro 2</div>
        <div class="quadro">Quadro 3</div>
        <div class="quadro">Quadro 4</div>
    </div>
</body>
</html>
  1. Crie o arquivo galeria.css:
.galeria {
    display: flex;
    flex-wrap: wrap; /* Quebra de linha ativada */
    gap: 10px;
}
 
.quadro {
    background-color: #e74c3c;
    color: white;
    width: 200px;
    height: 150px;
    text-align: center;
    line-height: 150px;
}

📊 Ilustração Visual: Column vs Row

graph TD
    A[Flex Direction] --> B[Row: Lado a Lado]
    A --> C[Column: Um embaixo do outro]

🛠️ Prática Obrigatória 1: Barra Lateral

Crie um arquivo chamado sidebar.html e o CSS. Crie um menu com 3 links, mas use flex-direction: column para que eles fiquem um embaixo do outro, como uma barra lateral!

🔑 Gabarito de Código

Prática 1: sidebar.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Sidebar</title>
    <link rel="stylesheet" href="side.css">
</head>
<body>
    <div class="sidebar">
        <a href="#">Dashboard</a>
        <a href="#">Missões</a>
        <a href="#">Inventário</a>
    </div>
</body>
</html>

side.css

.sidebar {
    display: flex;
    flex-direction: column; /* Coluna! */
    gap: 15px;
    background-color: #2c3e50;
    width: 150px;
    padding: 20px;
    height: 100vh; /* Altura toda da tela */
}
 
.sidebar a {
    color: white;
    text-decoration: none;
}

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks