Flexbox

O que é Flexbox?

Flexbox é um modelo de layout CSS projetado para facilitar o alinhamento, a distribuição e a ordenação de espaço entre itens dentro de um container. Antes do Flexbox, os desenvolvedores dependiam de floats, posicionamento e layouts baseados em tabelas para realizar tarefas simples, como centralizar uma div ou criar uma barra de navegação com itens de larguras iguais. Essas abordagens funcionavam, mas eram frágeis e verbosas. O Flexbox substituiu a maioria delas por um sistema limpo e previsível.

A ideia central é o modelo de dois eixos. Todo container flex possui um eixo principal (main axis) e um eixo transversal (cross axis). Por padrão, o eixo principal corre horizontalmente e o eixo transversal corre verticalmente, mas você pode trocá-los com flex-direction. Tudo no Flexbox — alinhamento, espaçamento, quebra de linha — é descrito em relação a esses dois eixos. Assim que você compreende esse modelo mental, as propriedades tornam-se intuitivas.

O Flexbox também é unidimensional. Ele organiza os itens em uma única linha ou em uma única coluna por vez. Se você precisar controlar linhas e colunas simultaneamente, o CSS Grid é a ferramenta ideal. Mas para a grande maioria dos layouts em nível de componente — barras de navegação, linhas de cards, grupos de formulários, rodapés — o Flexbox é exatamente o que você precisa.

Flex container vs flex items

O Flexbox funciona através de uma relação pai-filho. Você transforma um elemento pai em um flex container definindo display: flex. Seus filhos diretos tornam-se automaticamente flex items e passam a seguir as regras do Flexbox.

/* style.css */
.container {
  display: flex;
}

.container > * {
  /* These are now flex items */
}

Essa distinção é importante porque cada propriedade do Flexbox se aplica ou ao container ou aos itens — nunca a ambos. As propriedades do container controlam o ambiente do layout: direção do eixo, alinhamento, quebra de linha (wrapping) e espaçamento (gap). As propriedades dos itens controlam como cada item individual se comporta dentro desse ambiente: o quanto eles crescem, diminuem, seu tamanho base e sua ordem.

Um container também pode usar display: inline-flex para se comportar como um elemento inline, enquanto ainda utiliza Flexbox em seus filhos. Na prática, display: flex (nível de bloco) cobre a maioria dos casos de uso.

flex-direction

flex-direction define a direção do eixo principal. Esta é a propriedade mais fundamental do Flexbox, pois todas as outras propriedades dependem da direção em que o eixo principal corre.

/* style.css */
.container {
  display: flex;
  flex-direction: row; /* default */
}

Os quatro valores:

• row — os itens fluem da esquerda para a direita. Este é o padrão e o mais comum.
• row-reverse — os itens fluem da direita para a esquerda.
• column — os itens fluem de cima para baixo.
• column-reverse — os itens fluem de baixo para cima.

/* style.css */
.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column-reverse {
  flex-direction: column-reverse;
}

Alterar flex-direction troca qual eixo é o eixo principal e qual é o eixo transversal. Quando flex-direction é row, justify-content controla a distribuição horizontal e align-items controla o alinhamento vertical. Quando flex-direction é column, esses papéis se invertem.

justify-content

justify-content alinha os itens flexíveis ao longo do eixo principal. Ele controla como o espaço extra é distribuído entre ou ao redor dos itens.

/* style.css */
.container {
  display: flex;
  justify-content: center;
}

Os valores mais comuns:

• flex-start — os itens são agrupados no início do eixo principal (padrão).
• center — os itens ficam centralizados ao longo do eixo principal.
• flex-end — os itens são agrupados no final do eixo principal.
• space-between — os itens são distribuídos com espaço igual entre eles, sem espaço nas extremidades.
• space-around — os itens têm espaço igual ao redor deles, portanto, os vãos entre os itens são o dobro dos vãos das extremidades.
• space-evenly — os itens têm espaço exatamente igual entre si e nas extremidades.

/* style.css */
.start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.between {
  justify-content: space-between;
}

.around {
  justify-content: space-around;
}

.evenly {
  justify-content: space-evenly;
}

space-between é o valor mais utilizado para barras de navegação — o logo fica à esquerda, os links à direita, com espaço no meio. space-evenly proporciona uma distribuição mais equilibrada para elementos como barras de ícones ou listas de tags.

align-items

align-items alinha os itens flex along the cross axis (eixo transversal). Enquanto justify-content distribui o espaço ao longo do eixo principal, align-items controla como os itens se posicionam dentro do eixo transversal.

/* style.css */
.container {
  display: flex;
  align-items: center;
}

Os principais valores:

• stretch — os itens se esticam para preencher o eixo transversal (padrão).
• flex-start — os itens se alinham ao início do eixo transversal.
• center — os itens ficam centralizados ao longo do eixo transversal.
• flex-end — os itens se alinham ao final do eixo transversal.
• baseline — os itens se alinham com base na linha de base (baseline) do texto.

/* style.css */
.container {
  display: flex;
  align-items: stretch; /* default */
}

.centered {
  align-items: center;
}

.bottom {
  align-items: flex-end;
}

.baseline-aligned {
  align-items: baseline;
}

O valor baseline é útil quando os itens possuem tamanhos de fonte ou padding diferentes — ele garante que as linhas de texto fiquem alinhadas em uma mesma linha invisível. O padrão stretch é o motivo pelo qual os itens flex geralmente parecem mais altos do que o esperado: por padrão, eles se expandem para preencher o eixo transversal.

align-content

align-content controla como múltiplas linhas de itens flex são espaçadas ao longo do eixo transversal (cross axis). Ele só tem efeito quando flex-wrap está definido como wrap e o conteúdo envolve para múltiplas linhas.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Sem flex-wrap: wrap, align-content não faz nada porque existe apenas uma linha. Quando o conteúdo envolve, os valores espelham justify-content:

• flex-start — as linhas são agrupadas no início.
• center — as linhas são centralizadas ao longo do eixo transversal.
• flex-end — as linhas são agrupadas no final.
• space-between — as linhas se distribuem com espaço igual entre elas.
• space-around — as linhas têm espaço igual ao redor delas.
• space-evenly — as linhas têm espaçamento exatamente igual.
• stretch — as linhas se esticam para preencher o espaço disponível.

Para containers flex de linha única, align-items é o que você precisa. align-content torna-se relevante para layouts de múltiplas linhas, como nuvens de tags ou grupos de botões com wrap.

flex-wrap

Por padrão, os flex items tentam se ajustar em uma única linha. O flex-wrap permite que os itens quebrem para múltiplas linhas quando não houver mais espaço.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
}

Os três valores:

• nowrap — todos os itens permanecem em uma linha (padrão). Os itens podem encolher para caber.
• wrap — os itens quebram para novas linhas conforme necessário.
• wrap-reverse — os itens quebram para novas linhas, mas a direção do eixo transversal (cross axis) é invertida.

/* style.css */
.single-line {
  flex-wrap: nowrap; /* default */
}

.multi-line {
  flex-wrap: wrap;
}

.reversed-wrap {
  flex-wrap: wrap-reverse;
}

A quebra de linha é essencial para layouts responsivos. Uma barra de navegação com muitos links pode usar flex-wrap: wrap para que os itens movam-se para uma nova linha em telas menores sem causar overflow. Combinado com gap, layouts com quebra de linha ficam com um aspecto limpo, sem a necessidade de margens extras.

flex-grow, flex-shrink, flex-basis

Essas três propriedades controlam como os itens flexíveis compartilham o espaço ao longo do eixo principal. Elas trabalham juntas para determinar o tamanho final de cada item.

flex-basis define o tamanho inicial de um item antes que o espaço extra seja distribuído. Funciona como width, mas é respeitado pelo algoritmo do Flexbox.

/* style.css */
.item {
  flex-basis: 200px;
}

flex-grow controla o quanto um item expande para preencher o espaço disponível. O padrão é 0, o que significa que os itens não crescem. Um valor de 1 significa que o item ocupa uma parte igual do espaço restante.

/* style.css */
.item-a {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2; /* takes twice as much leftover space as item-a */
}

flex-shrink controla o quanto um item contrai quando não há espaço suficiente. O padrão é 1, o que significa que os itens encolhem proporcionalmente. Um valor de 0 impede que o item encolha.

/* style.css */
.item {
  flex-shrink: 0; /* will not shrink, may overflow */
}

A shorthand flex combina as três propriedades:

/* style.css */
.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

.item {
  flex: 0 0 200px; /* no grow, no shrink, fixed 200px */
}

A shorthand flex: 1 é um dos padrões mais úteis no Flexbox — ela concede a cada item uma parte igual do espaço disponível, o que é perfeito para colunas de larguras iguais, visualizações divididas e grids responsivos.

propriedade order

Por padrão, os itens flex aparecem na ordem em que estão no HTML. A propriedade order permite reordená-los visualmente sem alterar o DOM.

/* style.css */
.item-a {
  order: 2;
}

.item-b {
  order: 1; /* appears first visually */
}

.item-c {
  order: 3; /* appears last visually */
}

Todos os itens têm como padrão order: 0. Números menores vêm primeiro. Itens com o mesmo valor de order aparecem na ordem da fonte. Valores negativos são válidos e colocarão os itens antes daqueles com a ordem padrão.

Isso é útil para designs responsivos onde você deseja que uma barra lateral apareça acima do conteúdo principal no mobile, mas abaixo dele no desktop — basta alterar o order com uma media query em vez de reestruturar o HTML.

propriedade gap

A propriedade gap adiciona um espaçamento consistente entre itens flex. Ela substitui os antigos “hacks” de margin que eram necessários para criar espaçamento em layouts flex.

/* style.css */
.container {
  display: flex;
  gap: 1rem;
}

Você pode definir valores diferentes para o espaçamento de linhas e colunas:

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 2rem;
}

Ao contrário das margins, o gap adiciona espaço apenas entre os itens — não antes do primeiro nem depois do último. Isso torna o comportamento previsível e elimina a necessidade de margins negativas ou elementos wrapper extras. Ele funciona tanto em layouts flex de linha única quanto de múltiplas linhas.

Padrões comuns de Flexbox

Assim que você domina as propriedades, os padrões surgem naturalmente. Aqui estão os layouts mais comuns que o Flexbox resolve.

Centralização de conteúdo:

/* style.css */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Este é o uso clássico do Flexbox — ele centraliza um elemento filho tanto horizontalmente quanto verticalmente dentro de seu pai. Antes do Flexbox, a centralização vertical era um problema notório.

Barras de navegação:

/* style.css */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

O logo fica à esquerda, os links à direita e tudo permanece centralizado verticalmente. Adicionar gap aos links mantém o espaçamento uniforme entre eles.

Layouts de cards:

/* style.css */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
}

Os cards crescem para preencher o espaço disponível, diminuem quando necessário e quebram para novas linhas em telas menores. O basis 300px define uma largura mínima confortável.

Layout “Holy Grail”:

/* style.css */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

A página é uma coluna que preenche a viewport. A seção central é uma linha com uma sidebar de largura fixa e uma área principal flexível. Este padrão era extremamente difícil de implementar antes do Flexbox.

Quando usar Flexbox vs Grid

Flexbox e CSS Grid são complementares, não concorrentes. A regra mais simples: use Flexbox para uma dimensão, Grid para duas.

Use Flexbox quando:

• Você estiver organizando itens em uma única linha ou coluna.
• Precisar alinhar ou distribuir o espaço entre os itens.
• Estiver construindo layouts em nível de componente: navbars, grupos de botões, linhas de formulários, linhas de cards.
• Quiser que os itens quebrem naturalmente para novas linhas.
• Precisar centralizar conteúdo.

Use Grid quando:

• Precisar controlar linhas e colunas simultaneamente.
• Estiver construindo layouts em nível de página com header, sidebar, main e footer.
• Quiser o posicionamento explícito de itens em uma grade.
• Precisar que as tracks sejam dimensionadas com base no container do grid, em vez de basearem-se no conteúdo.

Na prática, a maioria dos projetos utiliza ambos. O layout de uma página usa Grid para a estrutura geral, enquanto os componentes individuais dentro desse layout usam Flexbox para o alinhamento interno. Eles resolvem problemas diferentes e funcionam perfeitamente juntos.

Melhores práticas

• Use gap em vez de margins — isso adiciona espaço apenas entre os itens, evitando problemas de espaçamento nas bordas.
• Use o atalho flex — flex: 1 é mais limpo do que definir grow, shrink e basis separadamente.
• Evite larguras fixas em flex items — deixe que flex-basis e flex-grow gerenciem o dimensionamento para garantir a responsividade.
• Prefira flex-wrap: wrap para layouts responsivos em vez de media queries para o dimensionamento de itens.
• Use align-items: center para centralização vertical — é a abordagem mais confiável.
• Combine com min-width: 0 em flex items que possam transbordar — por padrão, flex items não encolhem além do tamanho do seu conteúdo.
• Use HTML semântico dentro de flex containers — o Flexbox cuida do layout, não do significado.
• Teste com diferentes extensões de conteúdo — layouts em Flexbox devem se adaptar graciosamente a conteúdos curtos e longos.

Erros comuns

• Definir display: flex nos itens em vez de no container.
• Esquecer que align-content requer flex-wrap: wrap para ter qualquer efeito.
• Usar width fixo em itens flex em vez de flex-basis.
• Não definir min-width: 0 em itens que podem transbordar (overflow) seu container flex.
• Usar !important excessivamente para sobrescrever o dimensionamento de itens flex em vez de entender o algoritmo do flex.
• Aplicar propriedades de Flexbox ao eixo errado — esquecer que flex-direction inverte os eixos principal e transversal.
• Ignorar a acessibilidade — o Flexbox altera a ordem visual com order, mas não a ordem do DOM, portanto, os leitores de tela ainda seguem a fonte.

Ainda vale a pena aprender Flexbox em 2026?

Com certeza. O Flexbox não é uma tendência passageira — ele é o sistema de layout fundamental do CSS moderno. Todo framework relevante, biblioteca de componentes e design system depende dele. O CSS Grid complementa o Flexbox para layouts bidimensionais, mas o Flexbox continua sendo o padrão para alinhamento, espaçamento e distribuição em nível de componente. Compreender o Flexbox também torna o aprendizado do Grid mais fácil, pois o modelo de eixos e as propriedades de alinhamento são transferidos diretamente. Se você está construindo qualquer coisa para a web, Flexbox é uma habilidade que você usará todos os dias.

Como aprender Flexbox

O Flexbox é visual, então a melhor maneira de aprendê-lo é vendo-o em ação:

1. Comece com display: flex e justify-content — veja como os itens se distribuem ao longo de um eixo.
2. Adicione align-items — entenda o eixo transversal (cross axis) e como ele se relaciona com flex-direction.
3. Experimente flex-direction: column — veja como os eixos são invertidos.
4. Tente flex-wrap: wrap e gap — construa um layout de múltiplas linhas.
5. Brinque com flex-grow, flex-shrink e flex-basis — entenda como os itens compartilham o espaço.
6. Construa layouts reais: uma navbar, uma linha de cards, um hero centralizado, um layout com sidebar.
7. Use uma ferramenta interativa como o Flexbox Froggy ou o Guia de Flexbox do CSS Tricks para visualizar cada propriedade.

A partir daí, passe para o CSS Grid para layouts bidimensionais. Nosso tutorial interativo de CSS cobre Flexbox, Grid e design responsivo com exercícios práticos.