Exemplos práticos de layouts com Flexbox

Construa layouts comuns como cabeçalhos, rodapés e barras laterais usando Flexbox.

Até agora, você aprendeu as propriedades individuais do Flexbox e como elas funcionam. Agora é a hora de juntar tudo e ver como o Flexbox simplifica a criação de layouts que antes eram complexos e cheios de "truques" com float ou position.

Vamos construir alguns layouts comuns que você encontrará em quase todo site, usando o Flexbox de forma eficiente.

Exemplo 1: Cabeçalho com Logo e Menu de Navegação

Um cabeçalho é um elemento fundamental em qualquer página web. Com Flexbox, é fácil alinhar itens como um logo e um menu de navegação.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Layouts Flexbox - Cabeçalho</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f4f4f4;
    }

    .header {
      display: flex; /* Transforma o cabeçalho em um contêiner flex */
      justify-content: space-between; /* Distribui o espaço entre o logo e o menu */
      align-items: center; /* Centraliza os itens verticalmente */
      background-color: #333;
      color: white;
      padding: 10px 20px;
    }

    .logo {
      font-size: 1.8em;
      font-weight: bold;
    }

    .nav-menu ul {
      display: flex; /* Transforma o menu em um contêiner flex */
      list-style: none; /* Remove os marcadores de lista */
      padding: 0;
      margin: 0;
    }

    .nav-menu li {
      margin-left: 20px; /* Espaçamento entre os itens do menu */
    }

    .nav-menu a {
      color: white;
      text-decoration: none;
      padding: 5px 10px;
      transition: background-color 0.3s ease;
    }

    .nav-menu a:hover {
      background-color: #555;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="logo">Meu Logo</div>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Início</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main style="padding: 20px;">
    <h1>Exemplo de Cabeçalho com Flexbox</h1>
    <p>Este é um cabeçalho simples com um logo à esquerda e um menu de navegação à direita, ambos centralizados verticalmente usando Flexbox.</p>
  </main>
</body>
</html>

Análise:

  • display: flex; no .header transforma-o em um contêiner flex.
  • justify-content: space-between; empurra o .logo para a esquerda e o .nav-menu para a direita, distribuindo o espaço entre eles.
  • align-items: center; centraliza ambos (.logo e .nav-menu) verticalmente dentro do cabeçalho.
  • display: flex; no ul do menu transforma-o em outro contêiner flex, permitindo que os li se alinhem horizontalmente.

Exemplo 2: Cartões Responsivos em Grid (com flex-wrap)

Vamos criar uma seção de cartões que se ajustam ao tamanho da tela, quebrando para a próxima linha quando não há espaço suficiente.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Layouts Flexbox - Cartões</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f4f4f4;
    }

    .card-container {
      display: flex; /* Contêiner flex */
      flex-wrap: wrap; /* Permite que os cartões quebrem para a próxima linha */
      justify-content: center; /* Centraliza os cartões horizontalmente */
      gap: 20px; /* Espaçamento entre os cartões (nova propriedade, mais simples que margin) */
      padding: 20px;
      max-width: 1200px;
      margin: 20px auto;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .card {
      flex: 1 1 300px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 300px; */
      /* O cartão terá uma largura base de 300px, mas pode crescer ou encolher */
      background-color: #e0e0e0;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      min-width: 250px; /* Garante que o cartão não fique muito pequeno */
      max-width: 350px; /* Garante que o cartão não fique muito grande */
    }

    .card h3 {
      margin-top: 0;
      color: #333;
    }

    .card p {
      color: #666;
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <h3>Cartão 1</h3>
      <p>Este é o conteúdo do cartão 1. Ele se adapta ao espaço disponível.</p>
    </div>
    <div class="card">
      <h3>Cartão 2</h3>
      <p>Conteúdo do cartão 2. Flexbox é incrível para layouts responsivos!</p>
    </div>
    <div class="card">
      <h3>Cartão 3</h3>
      <p>Mais um cartão, mostrando como eles se organizam automaticamente.</p>
    </div>
    <div class="card">
      <h3>Cartão 4</h3>
      <p>Quarto cartão. Tente redimensionar a janela do navegador para ver a mágica!</p>
    </div>
    <div class="card">
      <h3>Cartão 5</h3>
      <p>Último cartão deste exemplo. Flexbox facilita a vida do desenvolvedor.</p>
    </div>
  </div>

  <main style="padding: 20px;">
    <h1>Exemplo de Cartões Responsivos com Flexbox</h1>
    <p>Esta seção mostra como criar um layout de cartões que se ajusta automaticamente ao tamanho da tela, quebrando para a próxima linha quando necessário.</p>
  </main>
</body>
</html>

Análise:

  • display: flex; e flex-wrap: wrap; no .card-container são cruciais para permitir que os cartões se organizem em múltiplas linhas.
  • justify-content: center; centraliza os cartões horizontalmente, mesmo quando há espaço sobrando na última linha.
  • gap: 20px; adiciona um espaçamento consistente entre os cartões.
  • flex: 1 1 300px; no .card é a estrela aqui:
    • flex-grow: 1;: Permite que os cartões cresçam para preencher o espaço extra.
    • flex-shrink: 1;: Permite que os cartões encolham se o espaço for limitado.
    • flex-basis: 300px;: Define uma largura base de 300px para cada cartão.
  • min-width e max-width nos cartões ajudam a controlar os limites de encolhimento e crescimento.

Exemplo 3: Formulário com Campos Alinhados

Alinhar campos de formulário e seus rótulos pode ser um desafio. Flexbox torna isso muito mais simples.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Layouts Flexbox - Formulário</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f4f4f4;
    }

    .form-container {
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      max-width: 500px;
      margin: 50px auto;
    }

    .form-group {
      display: flex; /* Cada grupo de label/input é um contêiner flex */
      flex-direction: column; /* Itens (label e input) empilhados verticalmente */
      margin-bottom: 15px;
    }

    .form-group label {
      margin-bottom: 5px;
      font-weight: bold;
      color: #333;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1em;
      flex-grow: 1; /* Faz o input/textarea crescer para preencher o espaço */
    }

    .form-group textarea {
      resize: vertical; /* Permite redimensionar verticalmente */
      min-height: 80px;
    }

    .button-group {
      display: flex;
      justify-content: flex-end; /* Alinha o botão à direita */
      margin-top: 20px;
    }

    .button-group button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1em;
      transition: background-color 0.3s ease;
    }

    .button-group button:hover {
      background-color: #0056b3;
    }

    /* Exemplo de alinhamento de label e input lado a lado em telas maiores */
    @media (min-width: 600px) {
      .form-group.inline {
        flex-direction: row; /* Muda para linha em telas maiores */
        align-items: center; /* Centraliza verticalmente label e input */
      }

      .form-group.inline label {
        flex-basis: 120px; /* Largura fixa para o label */
        margin-right: 10px;
        margin-bottom: 0;
      }
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>Formulário de Contato</h2>
    <form>
      <div class="form-group">
        <label for="name">Nome:</label>
        <input type="text" id="name" name="name" placeholder="Seu nome completo" required>
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="seu.email@exemplo.com" required>
      </div>
      <div class="form-group inline"> <!-- Adicionamos a classe inline para o media query -->
        <label for="subject">Assunto:</label>
        <input type="text" id="subject" name="subject" placeholder="Assunto da mensagem" required>
      </div>
      <div class="form-group">
        <label for="message">Mensagem:</label>
        <textarea id="message" name="message" placeholder="Sua mensagem"></textarea>
      </div>
      <div class="button-group">
        <button type="submit">Enviar Mensagem</button>
      </div>
    </form>
  </div>

  <main style="padding: 20px;">
    <h1>Exemplo de Formulário com Flexbox</h1>
    <p>Este formulário demonstra como usar Flexbox para alinhar campos e rótulos, e como adaptá-los para diferentes tamanhos de tela.</p>
  </main>
</body>
</html>

Análise:

  • display: flex; e flex-direction: column; no .form-group empilham o rótulo e o campo de entrada verticalmente por padrão.
  • flex-grow: 1; nos input e textarea faz com que eles preencham a largura disponível dentro do .form-group.
  • No @media (min-width: 600px), o .form-group.inline muda para flex-direction: row; e align-items: center;, colocando o rótulo e o campo lado a lado e centralizando-os verticalmente.
  • flex-basis: 120px; no label dentro do .form-group.inline dá uma largura fixa ao rótulo, garantindo que os campos de entrada comecem no mesmo ponto.
  • justify-content: flex-end; no .button-group alinha o botão de envio à direita.

Exemplo 4: Layout de Colunas (Sidebar e Conteúdo Principal)

Um layout comum de duas colunas, com uma barra lateral e uma área de conteúdo principal.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Layouts Flexbox - Colunas</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f4f4f4;
      min-height: 100vh; /* Garante que o body ocupe toda a altura da viewport */
      display: flex; /* Transforma o body em um contêiner flex */
      flex-direction: column; /* Itens (header, main, footer) empilhados verticalmente */
    }

    .header {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      text-align: center;
    }

    .main-content-wrapper {
      display: flex; /* Contêiner flex para sidebar e conteúdo principal */
      flex-grow: 1; /* Faz com que o wrapper ocupe todo o espaço vertical restante */
      padding: 20px;
      gap: 20px; /* Espaçamento entre sidebar e conteúdo */
    }

    .sidebar {
      flex: 0 0 250px; /* Não cresce, não encolhe, base de 250px */
      background-color: #d0d0d0;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .content {
      flex: 1; /* Cresce para ocupar o espaço restante */
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .footer {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      text-align: center;
      margin-top: auto; /* Empurra o footer para o final se houver espaço */
    }

    /* Responsividade para telas menores */
    @media (max-width: 768px) {
      .main-content-wrapper {
        flex-direction: column; /* Empilha sidebar e conteúdo em telas menores */
      }

      .sidebar {
        flex: 0 0 auto; /* Permite que a sidebar se ajuste ao conteúdo */
      }
    }
  </style>
</head>
<body>
  <header class="header">
    <h1>Meu Site Flexbox</h1>
  </header>

  <div class="main-content-wrapper">
    <aside class="sidebar">
      <h3>Barra Lateral</h3>
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    </aside>
    <main class="content">
      <h2>Conteúdo Principal</h2>
      <p>Este é o conteúdo principal da página. Ele se expande para preencher o espaço disponível.</p>
      <p>A barra lateral e o conteúdo principal se adaptam para se empilharem em telas menores, graças ao Flexbox.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </main>
  </div>

  <footer class="footer">
    <p>&copy; 2023 Meu Site Flexbox. Todos os direitos reservados.</p>
  </footer>
</body>
</html>

Análise:

  • display: flex; flex-direction: column; min-height: 100vh; no body faz com que o layout principal seja uma coluna, garantindo que o footer possa ser "empurrado" para o final.
  • flex-grow: 1; no .main-content-wrapper faz com que ele ocupe todo o espaço vertical restante entre o cabeçalho e o rodapé.
  • display: flex; no .main-content-wrapper transforma-o em um contêiner flex para a sidebar e o content.
  • flex: 0 0 250px; na .sidebar:
    • flex-grow: 0;: A barra lateral não cresce.
    • flex-shrink: 0;: A barra lateral não encolhe (mantém 250px).
    • flex-basis: 250px;: Define sua largura base como 250px.
  • flex: 1; no .content faz com que a área de conteúdo principal cresça para ocupar todo o espaço horizontal restante.
  • margin-top: auto; no .footer é um truque Flexbox para empurrar o rodapé para o final da página, mesmo que o conteúdo principal seja curto.
  • No @media (max-width: 768px), o .main-content-wrapper muda para flex-direction: column;, empilhando a barra lateral e o conteúdo principal verticalmente para telas menores. A sidebar também tem seu flex ajustado para 0 0 auto para se adaptar melhor.

Conclusão

Estes exemplos demonstram a versatilidade do Flexbox para criar layouts comuns e responsivos. A chave é identificar o contêiner flex e seus itens, e então aplicar as propriedades corretas (flex-direction, justify-content, align-items, flex-wrap no contêiner; flex, order, align-self nos itens) para alcançar o design desejado.

Pratique esses exemplos, altere os valores e veja como o layout se comporta. A experimentação é a melhor forma de dominar o Flexbox!