Flexbox CSS: Guia Completo sobre display flex, propriedades, elementos e exemplos 

O Flexbox, também chamado de Flex Box CSS ou css flexbox, foi criado para tornar a criação de layouts em CSS mais eficiente, facilitando o alinhamento e a distribuição de espaço entre itens dentro de um container, mesmo quando suas dimensões são desconhecidas ou mudam dinamicamente (daí o termo "flex").

Neste guia do flexbox você verá o que é Flexbox CSS, suas principais propriedades como flex-direction, justify-content, align-items, além de exemplos práticos de como usar display flex CSS no seu layout.

O que é o Flexbox?

Antes do Flexbox, float e position eram as principais ferramentas para criar layouts e posicionar elementos com compatibilidade entre navegadores.

No entanto, essas ferramentas apresentam limitações, principalmente quando se trata de responsividade.

Algumas tarefas que consideramos básicas em um leiaute, como centralização vertical de um elemento-filho com relação a um elemento-pai ou fazer com que elementos-filhos ocupem a mesma quantidade de espaço, ou colunas terem o mesmo tamanho independente da quantidade de conteúdo interno, eram impossíveis ou muito difíceis de serem manejadas com floats ou position, ao menos de forma prática e flexível.

O Flexbox CSS (Flexible Box) foi criado para simplificar coisas como centralizar elementos, ajustar tamanhos automáticos e criar layouts dinâmicos, graças ao uso da propriedade display: flex no CSS.

Os elementos filhos (flex items) dentro de um container com display flex podem se alinhar tanto na horizontal quanto na vertical, com dimensões flexíveis para se adaptar a cada situação.

Quais são os Elementos do Flexbox? Entenda flex-container, flex-item e os eixos (axes)

O Flexbox é composto por várias propriedades: algumas delas devem ser declaradas no container (o elemento-pai, que chamamos de flex container), enquanto outras devem ser declaradas nos elementos-filhos (os flex itens).

Se o leiaute "padrão" é baseado nas direções block e inline, o layout flexbox trabalha principalmente com propriedades como flex-direction (direção principal), justify-content (alinhamento horizontal) e align-items (alinhamento vertical), além de valores como flex-grow e flex-shrink, essenciais para definir como os flex items vão se comportar dentro de um flex container usando display: flex.

Veja abaixo um diagrama da especificação, explicando a ideia central por trás do leiaute Flex.

Os itens serão organizados no layout seguindo o eixo principal (main axis) ou o eixo transversal (cross axis):

| Conceito | Descrição |

|--------------------|----------| 

| Eixo principal | O eixo principal de um flex container é o eixo primário e ao longo dele são inseridos os flex items. Não é necessariamente horizontal; depende da propriedade flex-direction. |

| main-start / main-end | Os flex items são inseridos dentro do container começando pelo lado start, indo em direção ao lado end. |

| Tamanho principal | A largura ou altura de um flex item, dependendo da direção do container, é o tamanho principal do item. Pode ser width ou height, conforme a direção principal. |

| Eixo transversal | O eixo perpendicular ao eixo principal é chamado de eixo transversal. Sua direção depende da direção do eixo principal. |

| cross-start / cross-end | Linhas flex são preenchidas com itens e adicionadas ao container começando pelo lado cross-start em direção ao cross-end. |

| Cross size | A largura ou altura de um flex item na dimensão transversal. Pode ser width ou height, dependendo da direção transversal. |

O Flex Container é o elemento-pai que envolve toda a estrutura flexível. Para defini-lo, basta usar a propriedade display com os valores flex ou inline-flex.

<div class="flex-container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
  </div> 
  
 
  .flex-container { 
    display: flex; 
  } 

Flex Items são os elementos-filhos diretos do Flex Container.

Eixos ou Axes são as duas direções básicas que existem em um Flex Container: main axis, ou eixo principal, e cross axis, ou eixo transversal.

Propriedades para o elemento-pai (flex-container): display flex, flex-direction, flex-wrap e mais

Ao trabalhar com Flexbox, é fundamental entender quais propriedades devem ser aplicadas ao elemento-pai (por exemplo, uma div que irá agrupar os elementos a serem alinhados) e quais devem ser usadas nos elementos-filhos:

Display (display: flex; ou display: inline-flex; no CSS flexbox)

Esta propriedade transforma o elemento em um flex container, podendo ser do tipo 'inline' ou 'block', dependendo dos valores. Ela faz com que todos os elementos-filhos diretos passem a ser tratados no contexto do Flexbox.

.container { display: flex; /* or inline-flex */}

Obs.: Note que a propriedade de CSS columns não tem efeito em um flex container.

Flex-direction: como definir a direção dos elementos no display flex

Estabelece o eixo principal, definindo assim a direção em que os flex items são alinhados no flex container. O Flexbox é (com exceção de um wrapping opcional) um conceito de leiaute de uma só direção. Pense nos flex items inicialmente posicionais ou em linhas horizontais ou em colunas verticais.

  .flex-container { 
    flex-direction: row | row-reverse | column | column-reverse; 
  } 

• row (padrão): esquerda para a direita em ltr (left to right), direita para a esquerda em rtl (right to left)
• row-reverse: direita para a esquerda em ltr, esquerda para a direita em rtl
• column: mesmo que row, mas de cima para baixo
• column-reverse: mesmo que row-reverse mas de baixo para cima

Flex-wrap: como controlar a quebra de linha no flexbox

Por padrão, todos os flex items tentam se acomodar em uma única linha. A propriedade flex-wrap permite alterar esse comportamento, permitindo que os itens "quebrem" para linhas adicionais quando não houver espaço suficiente.

  .flex-container { 
    flex-wrap: nowrap | wrap | wrap-reverse; 
  } 

• nowrap (padrão): todos os flex items ficarão em uma só linha

• wrap: os flex items vão quebrar em múltiplas linhas, de cima para baixo

• wrap-reverse: os flex items vão quebrar em múltiplas linhas de baixo para cima

Flex-flow: shorthand para flex-direction e flex-wrap no flexbox CS

A propriedade flex-flow é uma forma abreviada (shorthand) para definir, em uma única linha, os valores de flex-direction e flex-wrap, ou seja, a direção do fluxo e se haverá quebra de linha no Flex Container. O valor padrão é row nowrap.

.flex-container { 
    flex-flow: row nowrap | row wrap | column nowrap | column wrap; 
  } 

Justify-content: alinhando itens no eixo principal usando flexbox CSS

Esta propriedade define o alinhamento dos itens ao longo do eixo principal, permitindo distribuir o espaço livre restante do container, independentemente dos itens serem flexíveis ou não. Também controla o alinhamento quando existem várias linhas de itens.

 .flex-container { 
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; 
  } 

• flex-start (padrão): os ítens são alinhados junto à borda de início (start) de acordo com qual for a flex-direction do container.
• flex-end: os ítens são alinhados junto à borda final (end) de acordo com qual for a flex-direction do container.
• start: os ítens são alinhados junto à borda de início da direção do writing-mode (modo de escrita).
• end: os ítens são alinhados junto à borda final da direção do writing-mode (modo de escrita).
• left: os ítens são alinhados junto à borda esquerda do container, a não ser que isso não faça sentido com o flex-direction que estiver sendo utilizado. Nesse caso, se comporta como start.
• right: os ítens são alinhados junto à borda direita do container, a não ser que isso não faça sentido com o flex-direction que estiver sendo utilizado. Nesse caso, se comporta como start.
• center: os ítens são centralizados na linha.
• space-between: os ítens são distribuídos de forma igual ao longo da linha; o primeiro ítem junto à borda inicial da linha, o último junto à borda final da linha.
• space-around: os ítens são distribuídos na linha com o mesmo espaçamento entre eles. Note que, visualmente, o espaço pode não ser igual, uma vez que todos os ítens tem a mesma quantidade de espaço dos dois lados: o primeiro item vai ter somente uma unidade de espaço junto à borda do container, mas duas unidades de espaço entre ele e o próximo ítem, pois o próximo ítem também tem seu próprio espaçamento que está sendo aplicado.
• space-evenly: os ítens são distribuídos de forma que o espaçamento entre quaisquer dois itens da linha (incluindo entre os ítens e as bordas) seja igual.

Nota: Flexbox tem suporte universal em todos os navegadores modernos a partir de 2026 (99%+ de cobertura global).

Todas as propriedades mencionadas funcionam sem necessidade de prefixos ou fallbacks. Para navegadores muito antigos (IE10 ou anteriores, já descontinuados), pode ser necessário usar prefixos como -webkit- ou -ms-, mas isso é raro em projetos atuais.

Também existem duas palavras-chave adicionais que você pode usar em conjunto com estes valores: safe e unsafe.

Safe garante que, independente da forma que você faça esse tipo de posicionamento, não seja possível "empurrar" um elemento e fazer com que ele seja renderizado para fora da tela (por exemplo, acima do topo), de uma forma que faça com que o conteúdo seja impossível de movimentar com a rolagem da tela (o CSS chama isso de "perda de dados").

Align-items: como alinhar itens no eixo transversal no flexbox

Define como os flex items são alinhados ao longo do eixo transversal (cross axis). É semelhante ao justify-content, porém aplicado no eixo perpendicular ao principal.

  .flex-container { 
    align-items: stretch | flex-start | flex-end | center | baseline; 
  } 
  

• stretch (padrão): estica os ítens para preencher o container, respeitando o min-width/max-width).
• flex-start/ start / self-start: ítens são posicionados no início do eixo transversal. A diferença entre eles é sutil e diz respeito às regras de flex-direction ou writing-mode.
• center: ítens são centralizados no eixo transversal.
• baseline: ítens são alinhados de acordo com suas baselines.

Os modificadores safe e unsafe pode ser usados em conjunto com todas essas palavras-chave (favor conferir o suporte de cada navegador) e servem para prevenir qualquer alinhamento de elementos que faça com que o conteúdo fique inacessível (por exemplo, para fora da tela).

Align-content: organizando o espaçamento entre linhas no flexbox CSS

Organiza as linhas dentro de um flex container quando há espaço extra no eixo transversal, similar ao modo como justify-content alinha ítens individuais dentro do eixo principal.

Importante: Esta propriedade não tem efeito quando há somente uma linha de flex items no container.

 .flex-container { 
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; 
  } 
  

• flex-start / start: ítens alinhados com o início do container. O valor (com maior suporte dos navegadores) flex-start se guia pela flex-direction, enquanto start se guia pela direção do writing-mode.
• flex-end / end: ítens alinhados com o final do container. O valor (com maior suporte dos navegadores) flex-end se guia pela flex-direction, enquanto end se guia pela direção do writing-mode.
• center: ítens centralizados no container.
• space-between: ítens distribuídos igualmente; a primeira linha junto ao início do container e a última linha junto ao final do container.
• space-around: ítens distribuídos igualmente com o mesmo espaçamento entre cada linha.
• space-evenly: ítens distribuídos igualmente com o mesmo espaçamento entre eles.
• stretch (padrão): ítens em cada linha esticam para ocupar o espaço remanescente entre elas.

Os modificadores safe e unsafe pode ser usados em conjunto com todas essas palavras-chave (favor conferir o suporte de cada navegador) e servem para prevenir qualquer alinhamento de elementos que faça com que o conteúdo fique inacessível (por exemplo, para fora da tela).

Propriedades flexbox para elementos-filhos (flex items): ordem, crescimento e alinhamento

A seguir, veremos propriedades que devem ser declaradas tendo como seletor os elementos-filhos, ou seja:

  <div class="flex-container"> 
    <div class="flex-item">1</div> 
    <div class="flex-item">2</div> 
    <div class="flex-item">3</div> 
  </div> 
  

Isso significa que, onde existe um elemento-pai com propriedade flex (o flex-container), é

possível atribuir propriedades flex específicas também para as elementos-filhos (flex-item).

Você pode definir as propriedades abaixo para apenas um dos elementos-filhos através de um identificador, como uma classe específica.

Order

Determina a ordem em que os elementos aparecerão.

Por padrão os flex items são dispostos na tela na ordem do código. Mas a propriedade order controla a ordem em que aparecerão no container.

  .flex-item { 
    order: <número>; /* o valor padrão é 0 */ 
  } 
  

Flex-grow

Define a habilidade de um flex item de crescer, caso necessário. O valor dessa propriedade é um valor numérico sem indicação de unidade, que serve para cálculo de proporção. Este valor dita a quantidade de espaço disponível no container que será ocupado pelo item.

Se todos os ítens tiverem flex-grow definido em 1, o espaço remanescente no container será distribuído de forma igual entre todos. Se um dos ítens tem o valor de 2, vai ocupar o dobro de espaço no container com relação aos outros (ou pelo menos vai tentar fazer isso).

  .flex-item { 
    flex-grow: <numero>; /* o valor default(padrão) é 0 */ 
  } 
  

Valores negativos não são aceitos pela propriedade.

Flex-shrink

Define a habilidade de um flex item de encolher, caso necessário.

  .flex-item { 
    flex-shrink: <número>; /* o valor padrão é 1 */ 
  } 
  

Valores negativos não são aceitos pela propriedade.

Flex-basis

Define o tamanho padrão para um elemento antes que o espaço remanescente do container seja distribuído. Pode ser um comprimento (por exemplo, 20%, 5rem, etc) ou uma palavra-chave.

A palavra-chave auto significa "observe minhas propriedades de altura ou largura" (o que era feito pela palavra-chave main-size, que foi depreciada).

A palavra-chave content significa "estabeleça o tamanho com base no conteúdo interno do ítem". A partir de 2026, essa palavra-chave tem bom suporte nos navegadores modernos (Firefox 37+, Chrome 94+, Safari 15.4+, Edge 84+), sendo segura para uso na maioria dos projetos atuais.

 .flex-item { 
     flex-basis: <'width'> | auto; /* o valor padrão é auto */ 
  } 
  

Com o valor de 0, o espaço extra ao redor do conteúdo não é considerado. Com o valor de auto, o espaço extra é distribuído com base no valor de flex-grow do ítem.

Flex

Esta é a propriedade shorthand para flex-grow, flex-shrink e flex-basis, combinadas. O segundo e terceiro parâmetros (flex-shrink e flex-basis) são opcionais. valor padrão é 0 1 auto, mas se você definir com apenas um número, é equivalente a <número> 1 0% (por exemplo, flex: 2 equivale a flex: 2 1 0%).

  .item { 
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
  } 
  

É recomendado que você utilize esta propriedade shorthand ao invés de definir cada uma das propriedades em separado. O shorthand define os outros valores de forma inteligente.

Align-self

Permite que o alinhamento padrão (ou o que estiver definido por align-items) seja sobrescrito para ítens individuais.

Por favor veja a explicação da propriedade align-items para entender quais são os possíveis valores.

  .item { 
    align-self: auto | flex-start | flex-end | center | baseline | stretch; 
  } 
  

Pontos importantes sobre o uso do Flexbox CSS e display flex

• O CSS Flexbox só aplica suas propriedades a elementos com relação direta de pai e filho; elementos que não são filhos diretos do Flex Container não são afetados.;
• Para que as propriedades funcionem nos elementos-filhos, as pais devem ter propriedade display: flex;.
• As propriedades float, clear e vertical-align não têm efeito em flex-items. Vale comentar que as 'column-*' properties (como column-count, column-gap, quando usadas em contexto multi-column) também não funcionam em flex containers.
• A propriedade gap (introduzida para Flexbox em 2021) é totalmente suportada em 2026 e é a forma recomendada de criar espaçamento entre flex items, substituindo técnicas antigas com margin.

Pratique Flexbox: Exercícios e dicas para aprender display flex CSS

Acesse o Flexbox Froggy (https://flexboxfroggy.com/), além deste, outros recursos práticos incluem:

• Flexbox Defense - aprenda Flexbox através de um jogo de tower defense;
• CSS Grid Garden - para praticar CSS Grid;
• Flexbox playground no Codepen - crie e teste layouts interativamente.

Links úteis para aprofundar no Flexbox CSS, flex direction e display flex

Assim como em qualquer nova funcionalidade, é fundamental praticar bastante e consultar referências sempre que surgirem dúvidas. A seguir, alguns links úteis.

Este conteúdo se baseia em grande parte no tutorial da CSS Tricks, com nossos agradecimentos! Guarde nos seus favoritos para consultar sempre que precisar.

O guia do CSS Tricks também aborda alguns outros aspectos importantes do Flex: suporte dos navegadores, bugs, propriedades relacionadas, prefixos e etc. Caso tenha alguma dúvida que não foi abordada neste artigo, você pode consultar estes temas relacionados no link.

• Flexbox no MDN
• Flexbox no W3Schools

Flexbox vs CSS Grid: quando usar cada um?

Flexbox é ideal para layouts unidimensionais (uma linha ou coluna), enquanto CSS Grid é melhor para layouts bidimensionais (linhas E colunas simultaneamente).

Em 2026, a melhor prática é combinar ambos: use CSS Grid para a estrutura geral da página e Flexbox para alinhar e distribuir itens dentro de cada seção do Grid. Ambas as tecnologias têm suporte completo nos navegadores modernos.

Gostou do post e quer saber mais? Aqui na Alura temos Carreiras de Desenvolvimento Front-end, em que, na etapa base, você pode aprender mais sobre HTML e CSS.