Guia Completo de Flexbox CSS: Domine Layouts Responsivos de Forma Simples

Se você já tentou centralizar uma div verticalmente no passado usando float ou <table>, sabe o quanto o CSS podia ser frustrante.

Essas técnicas, embora funcionais para a época, eram gambiarras que frequentemente resultavam em código complexo e de difícil manutenção. Felizmente, o Flexbox (Flexible Box Layout) chegou para mudar o jogo, oferecendo uma abordagem mais lógica e poderosa para a criação de layouts.

Neste guia, vamos explorar as propriedades fundamentais do Flexbox e como você pode utilizá-lo para criar layouts modernos, dinâmicos e totalmente responsivos.

O que é o Flexbox?

O Flexbox é um modelo de layout para CSS que permite distribuir o espaço entre itens em uma interface e alinhar esses itens de forma eficiente.

Ele é chamado de "unidimensional" porque lida com o layout em uma dimensão por vez: ou como uma linha (row) ou como uma coluna (column).

Essa abordagem unidimensional o torna ideal para componentes de aplicativos e layouts em pequena escala.

Os Dois Eixos do Flexbox

Para entender o Flexbox, é crucial compreender o conceito de eixos:

• Eixo Principal (Main Axis): É o eixo primário ao longo do qual os flex items são dispostos. Ele é definido pela propriedade flex-direction. Se a direção for row, o eixo principal é horizontal. Se for column, é vertical.
• Eixo Cruzado (Cross Axis): É o eixo perpendicular ao eixo principal. Se o eixo principal for horizontal, o eixo cruzado será vertical, e vice-versa.

Conceitos Fundamentais: Container vs. Itens

Para trabalhar com Flexbox, precisamos entender dois componentes:

• Flex Container: O elemento pai onde definimos display: flex;.
• Flex Items: Os elementos filhos diretos que se tornam flexíveis automaticamente.

Propriedades do Flex Container (O Pai)

As propriedades aplicadas ao container controlam o comportamento geral do grupo de elementos.

Em outras palavras, as propriedades aplicadas ao flex container (elemento pai), afetam como todos os seus elementos filhos serão exibidos.

1. flex-direction

Define a direção principal dos itens.

• row (padrão): Esquerda para a direita.
• column: De cima para baixo.
• row-reverse / column-reverse: Inverte a ordem dos itens.

2. justify-content

Alinha os itens ao longo do eixo principal (main axis).

• flex-start: Itens no início do container.
• center: Itens centralizados.
• space-between: Primeiro item no início, último no fim, com espaço igual entre eles.
• space-around: Espaço igual ao redor de cada item.
• space-evenly: Espaço distribuído igualmente entre os itens, incluindo as extremidades.

3. align-items

Alinha os itens ao longo do eixo cruzado (cross axis).

• stretch (padrão): Itens esticam para preencher o container.
• center: Itens centralizados verticalmente (se a direção for row).
• flex-start / flex-end: Alinha no topo ou na base.
• baseline: Alinha os itens com base na linha de base do texto.

4. flex-wrap

Por padrão, os flex items tentarão se ajustar em uma única linha. A propriedade flex-wrap controla se os itens devem quebrar para a próxima linha quando não houver espaço suficiente.

• nowrap (padrão): Todos os itens ficam em uma única linha.
• wrap: Os itens quebram para a próxima linha, de cima para baixo.
• wrap-reverse: Os itens quebram para a próxima linha, de baixo para cima.

5. align-content

Esta propriedade só tem efeito quando há várias linhas de flex items (ou seja, quando flex-wrap é wrap ou wrap-reverse). Ela alinha as linhas do container.

• stretch (padrão): As linhas se esticam para ocupar o espaço restante.
• center: As linhas são agrupadas no centro do container.
• space-between: As linhas são distribuídas uniformemente; a primeira linha fica no início e a última no final.
• space-around: As linhas são distribuídas uniformemente com espaçamento igual ao redor de cada linha.

Propriedades dos Flex Items (Os Filhos)

Você também pode controlar o comportamento individual de cada item dentro do container. As propriedades dos Flex Items (filhos) definem o comportamento de cada filho individualmente.

• flex-grow: Define a capacidade de um item crescer para ocupar o espaço disponível. Um valor de 1 significa que ele ocupará o espaço disponível igualmente com outros itens que também tenham flex-grow: 1.
• flex-shrink: Define se um item pode encolher caso o espaço seja insuficiente. Um valor de 1 significa que ele encolherá na mesma proporção que os outros itens.
• flex-basis: Define o tamanho inicial de um item antes da distribuição do espaço. Pode ser um valor em pixels, porcentagem, etc.
• flex (shorthand): É uma propriedade de atalho para flex-grow, flex-shrink e flex-basis.
• align-self: Permite sobrescrever o align-items do pai para um item específico.
• order: Por padrão, os flex items são exibidos na ordem em que aparecem no código-fonte. A propriedade order permite alterar essa ordem visualmente. O valor padrão é 0.

Flexbox vs. Grid: Qual usar?

Uma dúvida comum é quando usar Flexbox e quando usar CSS Grid. A resposta é: eles não são concorrentes, mas sim ferramentas complementares.

• Flexbox (1D): É ideal para layouts em uma única dimensão, seja uma linha ou uma coluna. Pense em componentes como barras de navegação, listas de cartões ou qualquer coisa que precise de alinhamento em um único eixo.
• CSS Grid (2D): É projetado para layouts em duas dimensões, ou seja, linhas e colunas ao mesmo tempo. É perfeito para o layout geral da página, como a criação de um esqueleto com cabeçalho, rodapé, barra lateral e conteúdo principal.

A regra geral é: use Grid para o layout macro da página e Flexbox para o layout micro dos componentes internos.

Por que usar Flexbox em seus projetos?

O uso de flexbox permite a criação de layouts otimizados para diversas telas, especialmente dispositivos móveis. Você pode conferir abaixo mais algumas vantagens em se utilizar do flexbox.

• Responsividade Nativa: Facilita a criação de designs que se adaptam a diferentes tamanhos de tela (Mobile First).
• Alinhamento Simplificado: Centralizar elementos (horizontal e verticalmente) agora exige apenas 3 linhas de código.
• Ordem Flexível: Você pode alterar a ordem visual dos elementos sem mexer no HTML usando a propriedade order.

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    

    .layout {
      display: flex;
      min-height: 100vh;
    }

    .sidebar {
      width: 250px;
      background: #2c2c2c;
      color: #fff;
    }
    

    .content {
      flex: 1;
      padding: 20px;
    }

    .cards {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .card {
      flex: 1 1 250px;
      background: #f2f2f2;
      padding: 20px;
      border-radius: 8px;
    }
    

Padrões de Layout Comuns com Flexbox

• Barra de Navegação: Use display: flex, justify-content: space-between e align-items: center para criar uma barra de navegação com o logotipo à esquerda e os links à direita.
• Galeria de Cartões: Combine display: flex e flex-wrap: wrap para criar uma grade de cartões que se ajusta automaticamente ao tamanho da tela.
• Layout "Holy Grail": Embora o Grid seja mais adequado para o layout geral, o Flexbox pode ser usado para criar o layout clássico de três colunas com cabeçalho e rodapé.

Quer elevar seu nível no CSS?

Dominar o Flexbox é o primeiro passo para se tornar um desenvolvedor Front-end capaz de criar designs responsivos. Se você quer aprender na prática, em detalhes, como criar layouts responsivos com Flexbox, conheça o nosso Curso Completo de Flexbox.