Bootstrap: Classes Utilitárias Flexbox

Última atualização: 2026-08-26

1. Introdução a Esta Lição

(1) Pré-requisitos

• Dominar o sistema de escala de espaçamento (0~5) e as abreviações direcionais
• Estar familiarizado com o uso de espaçamento responsivo (ex.: p-md-5)

(2) 🎯 O que você aprenderá

• Aprender a usar d-flex para ativar um contêiner Flex
• Dominar o alinhamento do eixo principal (justify-content) e do eixo transversal (align-items)
• Aprender a usar flex-wrap para criar layouts com quebra de linha
• Dominar order-* para ordenação e flex-fill para expansão
• Ser capaz de construir layouts Flexbox completos de forma independente

(3) Ponto de Dor

Bob quer criar uma barra de navegação: logo à esquerda, links de navegação centralizados e um botão de login à direita—usar layouts tradicionais requer float ou position, o que é trabalhoso e propenso a erros.

(4) Solução

O Bootstrap encapsula as propriedades comuns do Flexbox em classes utilitárias, permitindo implementar layouts flexíveis sem escrever uma linha de CSS. Usar as classes utilitárias Flexbox do Bootstrap requer apenas d-flex justify-content-between align-items-center.

Entendendo: Flexbox é como trabalhadores organizando caixas—o eixo principal determina a direção (horizontal ou vertical), o eixo transversal determina o alinhamento (centro/top/baixo), justify-content gerencia a distribuição horizontal e align-items gerencia o alinhamento vertical.

(5) Benefício

Depois de usar as classes utilitárias Flexbox, Bob completou o layout da barra de navegação com apenas algumas classes concisas—logo à esquerda, links centralizados, botão à direita—o código fica claro e fácil de manter.

2. Ativando o Contêiner Flex

Todas as classes utilitárias Flex são baseadas em d-flex ou d-inline-flex:

▶ Exemplo: Básicos do Contêiner Flex

<div class="d-flex bg-light p-2">d-flex - contêiner flex de nível de bloco</div>
<span class="d-inline-flex bg-info p-2 text-white">d-inline-flex - flex inline</span>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

Essas duas classes também suportam breakpoints responsivos: d-sm-flex, d-md-flex, etc.

3. Direção do Eixo Principal

flex-row (padrão) vai da esquerda para a direita, flex-row-reverse vai da direita para a esquerda, flex-column vai de cima para baixo.

<div class="d-flex flex-row bg-light p-2 mb-2">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

<div class="d-flex flex-column bg-light p-2">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

4. Alinhamento do Eixo Principal: justify-content

<div class="d-flex justify-content-start bg-light p-2 mb-2">
  <div class="p-2 bg-primary text-white">Início</div>
  <div class="p-2 bg-primary text-white">Início</div>
</div>
<div class="d-flex justify-content-center bg-light p-2 mb-2">
  <div class="p-2 bg-success text-white">Centro</div>
  <div class="p-2 bg-success text-white">Centro</div>
</div>
<div class="d-flex justify-content-end bg-light p-2 mb-2">
  <div class="p-2 bg-danger text-white">Fim</div>
  <div class="p-2 bg-danger text-white">Fim</div>
</div>
<div class="d-flex justify-content-between bg-light p-2 mb-2">
  <div class="p-2 bg-info text-white">Entre</div>
  <div class="p-2 bg-info text-white">Entre</div>
</div>
<div class="d-flex justify-content-around bg-light p-2">
  <div class="p-2 bg-warning">Ao redor</div>
  <div class="p-2 bg-warning">Ao redor</div>
</div>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

graph LR
    subgraph opções de justify-content
        A1[início] --> A2[centro]
        A2 --> A3[fim]
        A3 --> A4[entre]
        A4 --> A5[ao redor]
    end

graph LR
    subgraph opções de justify-content
        A1[início] --> A2[centro]
        A2 --> A3[fim]
        A3 --> A4[entre]
        A4 --> A5[ao redor]
    end

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

5. Alinhamento do Eixo Transversal: align-items

<div class="d-flex align-items-start bg-light p-2 mb-2" style="height: 80px;">
  <div class="p-2 bg-primary text-white">Início</div>
  <div class="p-2 bg-primary text-white">Início</div>
</div>
<div class="d-flex align-items-center bg-light p-2 mb-2" style="height: 80px;">
  <div class="p-2 bg-success text-white">Centro</div>
  <div class="p-2 bg-success text-white">Centro</div>
</div>
<div class="d-flex align-items-end bg-light p-2" style="height: 80px;">
  <div class="p-2 bg-danger text-white">Fim</div>
  <div class="p-2 bg-danger text-white">Fim</div>
</div>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

Cenário típico: align-items-center é a solução mais comum para centralização vertical—defina d-flex + align-items-center no contêiner pai, e o conteúdo será verticalmente centralizado automaticamente.

6. Alinhamento de Item Único: align-self

<div class="d-flex bg-light p-2" style="height: 100px;">
  <div class="p-2 bg-primary text-white align-self-start">Início</div>
  <div class="p-2 bg-success text-white align-self-center">Centro</div>
  <div class="p-2 bg-danger text-white align-self-end">Fim</div>
</div>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

7. Quebra de Linha: flex-wrap

<div class="d-flex flex-wrap bg-light p-2">
  <div class="p-3 m-1 bg-primary text-white">Item 1</div>
  <div class="p-3 m-1 bg-primary text-white">Item 2</div>
  <div class="p-3 m-1 bg-primary text-white">Item 3</div>
  <div class="p-3 m-1 bg-primary text-white">Item 4</div>
  <div class="p-3 m-1 bg-primary text-white">Item 5</div>
  <div class="p-3 m-1 bg-primary text-white">Item 6</div>
</div>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

8. Ordenação: order

<div class="d-flex bg-light p-2">
  <div class="p-3 bg-danger text-white order-3">Primeiro no HTML (order-3)</div>
  <div class="p-3 bg-success text-white order-1">Segundo no HTML (order-1)</div>
  <div class="p-3 bg-primary text-white order-2">Terceiro no HTML (order-2)</div>
</div>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default. order-0 ~ order-5, números menores vêm primeiro. Todos os itens têm order-0 por padrão.

9. Expansão: flex-grow e flex-fill

<div class="d-flex bg-light p-2">
  <div class="p-3 bg-danger text-white">Fixo</div>
  <div class="p-3 bg-success text-white flex-fill">flex-fill</div>
  <div class="p-3 bg-primary text-white flex-fill">flex-fill</div>
</div>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

10. Folha de Dicas de Classes Flex

(1) Referência Rápida de Propriedades Flex

(2) Valores de justify-content Explicados

(3) Valores de align-items Explicados

▶ Exemplo: Barra de Navegação

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Flex</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="d-flex justify-content-between align-items-center bg-dark text-white p-3">
    <div class="fw-bold fs-5">MeuLogo</div>
    <ul class="d-flex list-unstyled gap-4 mb-0">
      <li><a href="#" class="text-white text-decoration-none">Início</a></li>
      <li><a href="#" class="text-white text-decoration-none">Produtos</a></li>
      <li><a href="#" class="text-white text-decoration-none">Sobre</a></li>
      <li><a href="#" class="text-white text-decoration-none">Contato</a></li>
    </ul>
    <button class="btn btn-light btn-sm">Entrar</button>
  </nav>
  <div class="container mt-4">
    <p>Use <code>justify-content-between</code> para obter logo à esquerda, navegação centralizada e botão à direita.</p>
  </div>
</body>
</html>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

▶ Exemplo: Grade de Cards

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grade de Cards</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Grade de Cards Flex</h3>
    <div class="d-flex flex-column flex-md-row gap-3">
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">Card Um</h5>
          <p class="card-text">flex-fill deixa todos os cards com mesma largura.</p>
          <a href="#" class="btn btn-primary">Ver</a>
        </div>
      </div>
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">Card Dois</h5>
          <p class="card-text">Use gap-3 para controlar o espaçamento dos cards.</p>
          <a href="#" class="btn btn-success">Ver</a>
        </div>
      </div>
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">Card Três</h5>
          <p class="card-text">flex-column para vertical no mobile, flex-md-row para horizontal no desktop.</p>
          <a href="#" class="btn btn-outline-primary">Ver</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

▶ Exemplo: Formulário de Login Centralizado

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Centralizado</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="d-flex justify-content-center align-items-center bg-light" style="min-height: 100vh;">
    <div class="bg-white p-4 rounded shadow" style="width: 100%; max-width: 400px;">
      <h3 class="text-center mb-4">Login de Usuário</h3>
      <form>
        <div class="mb-3">
          <label class="form-label">E-mail</label>
          <input type="email" class="form-control" placeholder="nome@exemplo.com">
        </div>
        <div class="mb-3">
          <label class="form-label">Senha</label>
          <input type="password" class="form-control" placeholder="Digite sua senha">
        </div>
        <button type="submit" class="btn btn-primary w-100">Entrar</button>
      </form>
      <p class="text-center text-muted small mt-3 mb-0">
        Não tem uma conta? <a href="#">Cadastre-se agora</a>
      </p>
    </div>
  </div>
</body>
</html>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

▶ Exemplo: Objeto de Mídia

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Objeto de Mídia</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Objeto de Mídia Flex</h3>

    <div class="d-flex gap-3 mb-4">
      <div class="bg-primary text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
        A
      </div>
      <div>
        <h5 class="mb-1">Alice Wang</h5>
        <p class="mb-0 text-muted small">flex-shrink-0 garante que o avatar não seja comprimido. Use d-flex + gap-3 para layout texto-imagem, que é a implementação recomendada para objetos de mídia do Bootstrap.</p>
      </div>
    </div>

    <div class="d-flex gap-3">
      <div class="bg-success text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
        B
      </div>
      <div>
        <h5 class="mb-1">Bob Chen</h5>
        <p class="mb-0 text-muted small">align-self-center pode centralizar verticalmente o avatar em relação ao texto, útil quando as alturas dos avatares variam.</p>
      </div>
    </div>
  </div>
</body>
</html>

Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

❓ Perguntas Frequentes

P: Por que meus itens não ficam em uma linha ao usar d-flex? R: Flexbox usa flex-direction: row por padrão (layout horizontal). Verifique se outro CSS está sobrescrevendo o valor de display, ou se os elementos filhos são elementos de nível de bloco com width: 100%.

P: Qual a diferença entre justify-content-between e justify-content-around? R: between coloca o primeiro e o último item contra as bordas do contêiner, com espaço igual distribuído entre eles. around aloca espaço igual à esquerda e à direita de cada item, fazendo com que as lacunas nas extremidades sejam metade das lacunas do meio. Você pode modificar as classes no DevTools do navegador para comparar em tempo real.

P: Preciso usar Flexbox para centralização vertical? R: Para contêineres com altura conhecida, você também pode usar line-height ou position + transform. No entanto, o d-flex align-items-center do Flexbox é o método mais conciso e universal—não depende da altura do contêiner e tem a melhor compatibilidade com breakpoints responsivos.

P: Quando devo usar Flexbox e quando devo usar Grid? R: Flexbox é adequado para layouts unidimensionais (linha ou coluna), como barras de navegação, grupos de botões e objetos de mídia. Grid é adequado para layouts bidimensionais (linhas e colunas simultaneamente), como layouts principais de página e grades de cards. Regra simples: use Flexbox para uma única linha ou coluna, use Grid quando controlar linhas e colunas simultaneamente. Ambos podem ser aninhados.

P: Qual a diferença entre align-content e align-items? R: align-items controla o alinhamento dos itens dentro de uma única linha, enquanto align-content controla a distribuição de múltiplas linhas ao longo do eixo transversal. align-content só tem efeito quando flex-wrap: wrap está definido e há múltiplas linhas. O Bootstrap fornece a série de classes utilitárias align-content-* (ex.: align-content-center, align-content-between).

📖 Resumo

• d-flex ativa um contêiner flex, flex-row/column controla a direção
• justify-content-* controla o alinhamento do eixo principal, align-items-* controla o alinhamento do eixo transversal
• align-self-* controla itens individuais
• flex-wrap controla a quebra de linha, order-* controla a ordenação, flex-fill controla a expansão

📝 Exercícios

1. ⭐ Crie uma barra de navegação: logo à esquerda, 4 links no meio, botão de login à direita, usando justify-content-between e align-items-center.
2. ⭐⭐ Crie uma grade de cards de três colunas: vertical no mobile (flex-column), horizontal em tablets e acima (flex-md-row), com gap-3 entre os cards.
3. ⭐⭐⭐ Crie uma página de animação interativa Flexbox: demonstre os efeitos dos 6 valores de justify-content, cada um com explicação textual e 3 blocos coloridos.

Lição Anterior: Espaçamento · Próxima Lição: Design Responsivo

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós