DS & II

capitulo_17_flexbox_p1

Leitura de 2 min

Capítulo 17: Formação de Combate (Flexbox P1) 🏹🛡️

Neste capítulo, vamos aprender a alinhar elementos lado a lado de forma fácil usando o Flexbox, a ferramenta mais moderna para layouts, usando o tema Formação de Tropa!

📖 O que é Flexbox?

Antigamente, colocar coisas lado a lado no CSS era muito difícil. O Flexbox resolveu isso! Ele é um modelo de layout que permite alinhar itens dentro de um contêiner de forma flexível.

Para começar, dizemos que o contêiner pai tem display: flex;. A partir daí, podemos controlar os filhos!

Propriedades principais do pai:

  • justify-content: Alinha os itens na horizontal (ex: center, space-between, space-around).
  • align-items: Alinha os itens na vertical (ex: center, flex-start, flex-end).

📖 Exemplo Guiado: Alinhando Guerreiros

Vamos colocar 3 caixas lado a lado com espaço entre elas.

  1. Crie o arquivo flex.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Flexbox</title>
    <link rel="stylesheet" href="flex.css">
</head>
<body>
    <div class="exercito">
        <div class="soldado">1</div>
        <div class="soldado">2</div>
        <div class="soldado">3</div>
    </div>
</body>
</html>
  1. Crie o arquivo flex.css:
.exercito {
    display: flex;
    justify-content: space-between; /* Espaço igual entre eles */
    background-color: #ddd;
    padding: 10px;
}
 
.soldado {
    background-color: #3498db;
    color: white;
    padding: 20px;
    width: 50px;
    text-align: center;
}

📊 Ilustração Visual: Justify Content

graph TD
    A[Flex Container] --> B[justify-content: center]
    A --> C[justify-content: space-between]

🛠️ Prática Obrigatória 1: Menu Centralizado

Crie um arquivo chamado menu_flex.html e o CSS. Crie uma div chamada menu e coloque 3 links dentro dela. Use Flexbox para centralizar os links no meio da página (justify-content: center) e dê um espaço entre eles usando gap: 20px no contêiner pai!

🔑 Gabarito de Código

Prática 1: menu_flex.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Menu Flex</title>
    <link rel="stylesheet" href="menu.css">
</head>
<body>
    <div class="menu">
        <a href="#">Início</a>
        <a href="#">Sobre</a>
        <a href="#">Contato</a>
    </div>
</body>
</html>
.menu {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaço entre os links */
    background-color: #333;
    padding: 15px;
}
 
.menu 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