EasyCode365EasyCode365

Introdução ao CSS Flexbox

Flexbox é uma ferramenta de layout CSS para organizar itens em uma linha ou em uma coluna.

Ele ajuda você a colocar caixas lado a lado, centralizar conteúdo, adicionar espaçamento uniforme, mover itens para uma nova linha e dividir o espaço disponível entre itens.

Nesta aula, você aprenderá o básico de Flexbox para iniciantes: contêineres, itens, direção, alinhamento, quebra de linha, espaçamento e proporções.

Por que Flexbox existe

Antes do Flexbox, desenvolvedores muitas vezes usavam floats, inline-block ou posicionamento para criar layouts.

Essas ferramentas podem funcionar, mas não foram feitas para layout flexível de interfaces. Flexbox foi criado para facilitar layouts de uma dimensão.

Uma dimensão significa layout em uma direção principal por vez:

  • uma linha
  • uma coluna

Para layouts completos de duas dimensões, CSS Grid costuma ser uma ferramenta melhor. Para linhas, colunas, barras de navegação, toolbars e grupos de cards, Flexbox costuma ser uma ótima escolha.

O que é um flex container

Um flex container é o elemento pai que controla um layout Flexbox.

Você cria um adicionando display: flex ao pai.

Somente leitura

O contêiner decide como seus filhos diretos são colocados, espaçados, alinhados e dimensionados.

O que são flex items

Flex items são os filhos diretos de um flex container.

Somente filhos diretos se tornam flex items. Elementos aninhados mais profundamente dentro desses filhos não são flex items, a menos que o próprio pai deles também use display: flex.

Somente leitura
<div class="container">
  <div>Flex item</div>
  <div>Flex item</div>
</div>

O pai é o flex container. Os dois <div> filhos diretos são flex items.

Ativando Flexbox com display: flex

O menor exemplo de Flexbox precisa de uma regra no pai: display: flex.

Por padrão, flex items se alinham em uma linha.

Editável
<div class="container">
  <div class="box">Caixa 1</div>
  <div class="box">Caixa 2</div>
  <div class="box">Caixa 3</div>
</div>

<style>
  .container {
    display: flex;
    padding: 12px;
    background-color: #e5e7eb;
    font-family: Arial, sans-serif;
  }

  .box {
    padding: 16px;
    margin: 4px;
    background-color: #2563eb;
    color: white;
    border-radius: 6px;
  }
</style>

As três caixas viram uma linha porque o pai agora é um flex container.

Main axis e cross axis

Flexbox usa duas direções importantes:

  • O main axis é a direção que os flex items seguem.
  • O cross axis é a direção que cruza o main axis.

Com o padrão flex-direction: row, o main axis vai da esquerda para a direita, e o cross axis vai de cima para baixo.

Se você mudar para flex-direction: column, os eixos trocam. O main axis se torna vertical, e o cross axis se torna horizontal.

Direção com flex-direction

A propriedade flex-direction controla a direção principal dos flex items.

Valores comuns:

  • row: os itens ficam em uma linha horizontal. Este é o padrão.
  • column: os itens empilham em uma coluna vertical.
Editável
<div class="row-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="column-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .row-layout,
  .column-layout {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .row-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .column-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .item {
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    text-align: center;
  }
</style>

Mudar flex-direction muda o main axis, o que também muda como o alinhamento funciona.

Este exemplo usa align-items: flex-start para que os itens da coluna mantenham sua largura natural em vez de se esticarem por todo o contêiner.

Alinhamento no main axis com justify-content

justify-content alinha flex items ao longo do main axis.

Com a direção row padrão, isso geralmente significa alinhamento horizontal.

Valores comuns:

  • flex-start: os itens ficam no início.
  • center: os itens vão para o centro.
  • flex-end: os itens vão para o final.
  • space-between: o primeiro item vai para o início, o último vai para o final, e o espaço é distribuído entre eles.
  • space-around: cada item recebe espaço igual ao seu redor.
  • space-evenly: o espaçamento entre itens e nas bordas é igual.
Editável
<div class="toolbar">
  <button>Voltar</button>
  <button>Salvar</button>
  <button>Próximo</button>
</div>

<style>
  .toolbar {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .toolbar button {
    padding: 8px 12px;
  }
</style>

Tente mudar space-between para center para ver os botões se moverem ao longo do main axis.

Alinhamento no cross axis com align-items

align-items alinha flex items ao longo do cross axis.

Com a direção row padrão, isso geralmente significa alinhamento vertical.

Por padrão, align-items é stretch, o que faz os itens crescerem para preencher o cross axis (por exemplo, alturas iguais em uma linha). Use um valor como center para alinhar itens sem esticá-los.

Editável
<div class="panel">
  <div class="tile small">Pequeno</div>
  <div class="tile tall">Alto</div>
  <div class="tile small">Pequeno</div>
</div>

<style>
  .panel {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 140px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .tile {
    width: 80px;
    display: grid;
    place-items: center;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .small {
    height: 48px;
  }

  .tall {
    height: 96px;
  }
</style>

Os itens ficam centralizados verticalmente porque align-items funciona através da direção principal.

Espaçamento com gap

A propriedade gap adiciona espaço entre flex items.

Ela geralmente é mais limpa do que adicionar margins a cada item.

Editável
<div class="link-row">
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</div>

<style>
  .link-row {
    display: flex;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .link-row span {
    padding: 8px 12px;
    background-color: #eef2ff;
    border: 1px solid #4f46e5;
    border-radius: 999px;
  }
</style>

gap cria espaço apenas entre os itens. Ele não adiciona espaço extra antes do primeiro item nem depois do último.

Quebra de linha com flex-wrap

Por padrão, flex items tentam ficar em uma linha.

Se o contêiner ficar estreito demais, os itens podem se comprimir ou transbordar. Use flex-wrap: wrap para permitir que eles passem para novas linhas.

Editável
<div class="badge-list">
  <span>Selectors</span>
  <span>Box model</span>
  <span>Typography</span>
  <span>Forms</span>
  <span>Flexbox</span>
</div>

<style>
  .badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 260px;
    font-family: Arial, sans-serif;
    background: #cccccc;
  }

  .badge-list span {
    padding: 8px 12px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
    border-radius: 999px;
  }
</style>

Wrapping é útil para tags, grupos de botões e linhas de cards que precisam funcionar em telas menores.

Proporções com flex

A propriedade flex controla como flex items crescem e encolhem.

Um padrão simples para iniciantes é flex: 1. Se todos os itens usam flex: 1, eles dividem o espaço disponível igualmente.

Editável
<div class="columns">
  <div class="column">Um</div>
  <div class="column">Dois</div>
  <div class="column">Três</div>
</div>

<style>
  .columns {
    display: flex;
    gap: 10px;
    font-family: Arial, sans-serif;
  }

  .column {
    flex: 1;
    padding: 20px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    text-align: center;
  }
</style>

Cada coluna ocupa uma parte igual da linha.

Erros comuns de iniciantes

  • Colocar propriedades do contêiner no item: justify-content, align-items, gap e flex-wrap geralmente pertencem ao flex container.
  • Esquecer que os eixos podem mudar: justify-content segue o main axis, nem sempre a direção horizontal.
  • Esperar que todo elemento aninhado seja um flex item: somente filhos diretos do flex container se tornam flex items.
  • Usar margins em vez de gap: gap é mais simples para espaçar flex items.
  • Usar Flexbox para todo layout: Flexbox é ótimo para uma direção. Grid costuma ser melhor para layouts de duas dimensões.

Mini tarefa prática

Veja esta regra CSS:

Somente leitura

Se houver dois botões dentro de .menu, onde eles aparecerão?

Confira as respostas do quiz quando estiver pronto.

Quiz curto com respostas

  1. Qual propriedade CSS transforma um pai em um flex container?
  2. align-items funciona no main axis ou no cross axis?
  3. Qual propriedade permite que flex items passem para uma nova linha?

Respostas:

  1. display: flex.
  2. O cross axis.
  3. flex-wrap.

Resposta da mini tarefa prática: o primeiro botão vai para o início do contêiner, e o segundo vai para o final, com espaço vazio entre eles.

Pequeno desafio

Crie uma barra de navegação simples com Flexbox.

Seus objetivos:

  • Transforme .navbar em um flex container.
  • Empurre os links para o lado direito.
  • Adicione um gap de 15px entre os links.
Editável
<nav class="navbar">
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Início</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Sobre</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Contato</a>
</nav>

<style>
  .navbar {
    padding: 20px;
    background-color: #1f2937;
    font-family: Arial, sans-serif;
    /* Ative Flexbox */

    /* Empurre os links para a direita */

    /* Adicione um gap de 15px */
  }

  .nav-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
</style>

Resumo

  • display: flex transforma um pai em um flex container.
  • Filhos diretos de um flex container se tornam flex items.
  • Flexbox trabalha em uma direção principal por vez: linha ou coluna.
  • O main axis segue flex-direction.
  • O cross axis cruza o main axis.
  • justify-content alinha itens ao longo do main axis.
  • align-items alinha itens ao longo do cross axis.
  • gap cria espaço limpo entre flex items.
  • flex-wrap: wrap permite que itens passem para novas linhas.
  • flex: 1 permite que itens compartilhem o espaço disponível igualmente.
  • Flexbox é melhor que floats para muitos layouts de uma dimensão, mas Grid costuma ser melhor para layouts de duas dimensões.