Aula 07 de 10

Flexbox

A forma moderna de alinhar e distribuir elementos — sem gambiarras, sem float, sem dor de cabeça.

display: flex justify-content align-items gap flex-wrap

// entendendo

Como funciona

Você coloca display: flex no container (o pai). Os filhos diretos se alinham automaticamente lado a lado.

justify-content — controla o eixo horizontal (ou o principal): flex-start, center, space-between, space-around
align-items — controla o eixo vertical (ou o cruzado): flex-start, center, stretch
gap — espaço entre os filhos (melhor que margin)
flex-wrap: wrap — permite que os filhos quebrem para a linha de baixo
flex-direction: column — empilha os filhos verticalmente

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

// mão na massa

Agora é com você

Centralizar um elemento

Centralize um <div> (horizontal e vertical) dentro de um container que ocupa toda a tela. Use justify-content: center e align-items: center.

a7e1.html

<style>
  .container {
    display: flex;
    /* complete: justify-content e align-items */
    height: 200px;
    background: #f1f5f9;
  }
  .caixa {
    background: #6366f1;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
  }
</style>

<div class="container">
  <div class="caixa">Centralizado!</div>
</div>

Preciso de uma dica

Adicione justify-content: center; e align-items: center; no .container.

Observação: Centralizar com Flexbox é a solução mais simples e confiável. Antes do Flex, isso exigia truques complicados com position: absolute e cálculos.

Navbar com espaço entre itens

Monte uma navbar com logo à esquerda e 3 links à direita usando justify-content: space-between.

a7e2.html

<style>
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: #1e293b;
  }
  .logo { color: #f97316; font-weight: bold; font-size: 1.1rem; }
  nav { display: flex; gap: 20px; }
  nav a { color: #94a3b8; text-decoration: none; }
  nav a:hover { color: white; }
</style>

<header class="navbar">
  <span class="logo">gustavoweb</span>
  <nav>
    <a href="#">Início</a>
    <a href="#">Projetos</a>
    <a href="#">Contato</a>
  </nav>
</header>

Observação: Perceba que o nav interno também é um flex container — com gap separando os links. Flex dentro de flex é comum e funciona muito bem.

Grade de cards com flex-wrap

Crie 4 cards lado a lado que quebram de linha quando não cabem. Use flex-wrap: wrap e gap. Cada card deve ter flex: 1 1 180px para crescer e encolher.

a7e3.html

<style>
  .grade {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }
  .card {
    flex: 1 1 180px;
    padding: 20px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
  }
  .card h3 { margin-bottom: 6px; }
  .card p { color: #64748b; font-size: 0.9rem; }
</style>

<div class="grade">
  <div class="card"><h3>Card 1</h3><p>Descrição curta do card.</p></div>
  <div class="card"><h3>Card 2</h3><p>Descrição curta do card.</p></div>
  <div class="card"><h3>Card 3</h3><p>Descrição curta do card.</p></div>
  <div class="card"><h3>Card 4</h3><p>Descrição curta do card.</p></div>
</div>

Observação: flex: 1 1 180px significa: pode crescer (1), pode encolher (1), mas começa com 180px. Redimensione o preview e veja os cards se adaptando automaticamente.

// desafio

layout completo

Monte uma página com: navbar (logo + links), hero centralizado com título e botão, e grade de 3 cards. Use Flexbox em todas as partes.

a7d1.html DESAFIO

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: sans-serif; }
  /* navbar, hero, grade — complete aqui */
</style>

<!-- monte a estrutura aqui -->

Aula 06 Aula 08