Flexbox: Tudo Que Você Precisa Saber

Flexbox é uma das tecnologias CSS que mais muda a vida de quem está aprendendo a posicionar elementos na tela. Antes dela, centralizar um elemento verticalmente era uma gambiarra. Com ela, são três linhas de código.

Nesse post você vai entender o que é, como funciona e quais propriedades usar para montar basicamente qualquer layout.

O que é Flexbox e para que serve

Flexbox é uma tecnologia que faz parte do CSS. Ela existe para facilitar o posicionamento dos itens dentro de um container.

Container é qualquer elemento HTML que tem outros elementos dentro, uma div com botões, uma nav com links, um header com logo e menu. Esses elementos internos são os itens.

Quando você ativa o Flexbox no container, os itens dentro dele passam a obedecer as regras flexíveis que você define. O posicionamento fica mais fluido, mais controlado.

Os dois eixos do Flexbox

O Flexbox trabalha com dois eixos. Sempre dois, nunca um, nunca três.

O eixo horizontal vai da esquerda para a direita. O eixo vertical vai de cima para baixo.

Quando você ativa o Flexbox, o eixo horizontal é o principal por padrão. Ele quem manda. O vertical fica como eixo secundário.

Isso vai importar muito quando você for aplicar as propriedades, porque cada propriedade age sobre um eixo específico.

Ativando o Flexbox

Para ativar, basta adicionar display: flex no container:

.container {
  display: flex;
}

Só isso já muda o comportamento dos filhos. Eles passam a ficar um ao lado do outro, porque o eixo principal agora é o horizontal.

justify-content: posicionando no eixo principal

Essa propriedade controla como os itens se distribuem no eixo principal, que por padrão é o horizontal.

.container {
  display: flex;
  justify-content: center;
}

Os valores mais usados:

• flex-start (padrão): itens ficam no começo do eixo, ou seja, na esquerda
• flex-end: itens vão para o fim do eixo, na direita
• center: itens ficam no meio
• space-between: distribui os itens com espaço igual entre eles, sem espaço nas pontas
• space-around: distribui com espaço ao redor de cada item

Uma coisa importante: start e end não significam esquerda e direita. Significam começo e fim do eixo. Isso vai fazer sentido quando você mudar o eixo principal para a coluna.

align-items: posicionando no eixo secundário

Se justify-content cuida do eixo principal, align-items cuida do secundário.

Com o eixo principal sendo o horizontal, o secundário é o vertical. Então align-items controla como os itens ficam na altura do container.

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

Isso centraliza os itens tanto na horizontal quanto na vertical. Três linhas de código. Antes do Flexbox, fazer isso era um sofrimento com margem negativa e cálculo manual de pixels.

Os valores:

• stretch (padrão): os itens esticam para preencher toda a altura do container
• flex-start: itens ficam no topo
• flex-end: itens ficam na base
• center: itens ficam no meio vertical

align-self: sobrescrevendo para um item específico

As propriedades do container afetam todos os filhos. Mas às vezes você quer que um item específico se comporte diferente.

Para isso existe align-self. Você coloca diretamente no item, não no container:

.item-dois {
  align-self: flex-end;
}

Assim, todos os outros seguem a regra do container, mas esse item vai para onde você mandou.

flex-direction: mudando o eixo principal

Você pode mudar qual é o eixo principal com flex-direction:

.container {
  display: flex;
  flex-direction: column;
}

Com column, o eixo principal vira o vertical. Agora os itens ficam um abaixo do outro, e o justify-content passa a controlar o posicionamento de cima para baixo. O align-items passa a controlar o horizontal.

Os dois valores mais usados:

• row (padrão): eixo principal é horizontal, itens ficam lado a lado
• column: eixo principal é vertical, itens ficam um abaixo do outro

flex-grow, flex-shrink e flex-basis

Essas três propriedades controlam como cada item cresce, encolhe e qual é o tamanho base dele.

flex-grow define se o item pode crescer para preencher o espaço disponível. O valor 1 significa que sim, pode crescer:

.item {
  flex-grow: 1;
}

flex-shrink define se o item pode encolher quando o espaço diminui. O valor 0 significa que não, ele mantém o tamanho:

.item {
  flex-shrink: 0;
}

flex-basis define o tamanho base do item antes do crescimento ou encolhimento ser calculado:

.item {
  flex-basis: 150px;
}

Você pode usar as três separadas, mas na prática quase ninguém faz isso. O que todo mundo usa mesmo é o shorthand flex:

.item {
  flex: 1;
}

flex: 1 é equivalente a flex-grow: 1, flex-shrink: 1, flex-basis: 0. Os itens dividem o espaço disponível de forma igual.

Se você quiser que um item ocupe o dobro do espaço de outro:

.item-grande {
  flex: 2;
}
 
.item-pequeno {
  flex: 1;
}

O item com flex: 2 vai sempre ter o dobro do espaço disponível do item com flex: 1.

Exemplo prático: montando um header

Vamos montar um header estilo YouTube, com logo, barra de busca e área do usuário.

<header class="header">
  <div class="logo">Logo</div>
  <div class="busca">Busca</div>
  <div class="usuario">Usuario</div>
</header>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.logo {
  width: 150px;
}
 
.busca {
  flex: 1;
}

Com isso:

• display: flex coloca os três lado a lado
• justify-content: space-between espalha com espaço entre eles
• align-items: center centraliza verticalmente
• .logo tem tamanho fixo de 150px
• .busca com flex: 1 ocupa todo o espaço restante disponível
• .usuario fica com o tamanho do seu conteúdo

Resultado: header funcional, responsivo, sem gambiarras.

As propriedades que você vai usar 95% do tempo

Para montar a grande maioria dos layouts, você vai precisar de:

• display: flex para ativar
• justify-content para posicionar no eixo principal
• align-items para posicionar no eixo secundário
• flex-direction quando precisar mudar de linha para coluna
• flex: 1 nos itens que precisam ocupar espaço proporcional

O resto, flex-grow, flex-shrink, flex-basis individualmente, você usa em situações mais específicas. Mas saber que existem e como funcionam já te dá o controle total.

O resumo

Flexbox tem dois eixos: horizontal (principal por padrão) e vertical (secundário). justify-content posiciona no eixo principal, align-items no secundário. flex-direction inverte quem é principal. flex: 1 distribui o espaço disponível de forma proporcional entre os itens.

Com isso você consegue montar qualquer layout. O que vai fazer você dominar de verdade é praticar: pega um site que você gosta, olha a estrutura visual e tenta recriar o posicionamento do zero. Vai travar, vai bater cabeça, e vai aprender.