Guia Completo Flexbox

Aprenda todas as propriedades do CSS Flexbox de forma prática e interativa

Conceitos Básicos do Flexbox

Entenda como funciona o display flex e suas características fundamentais

O que é Flexbox?

O Flexbox (Flexible Box Layout) é um método de layout CSS que permite organizar elementos de forma flexível e eficiente. Para ativar o Flexbox, aplicamos display: flex ao elemento pai (container).

Comparação: Sem Flex vs Com Flex

Sem Flexbox (display: block)

Os elementos ficam empilhados verticalmente (comportamento padrão de divs)

1
2
3
display: block; (padrão)

Com Flexbox (display: flex)

Os elementos se alinham horizontalmente no mesmo eixo

1
2
3
display: flex;

Conceitos Fundamentais

🎯 Flex Container

O elemento pai que recebe display: flex

📦 Flex Items

Os elementos filhos diretos do flex container

➡️ Eixo Principal

Direção horizontal (padrão) onde os itens se alinham

⬇️ Eixo Transversal

Direção perpendicular ao eixo principal (vertical)

Justify Content

Como alinhar itens no eixo principal (horizontal)

O que é Justify Content?

A propriedade justify-content define como os itens flexíveis são alinhados ao longo do eixo principal (horizontal por padrão) de um container flex.

Demonstrações

flex-start (padrão)

Alinha os itens no início do container

1
2
3
justify-content: flex-start;

center

Centraliza os itens no container

1
2
3
justify-content: center;

flex-end

Alinha os itens no final do container

1
2
3
justify-content: flex-end;

space-between

Distribui espaço igual entre os itens

1
2
3
justify-content: space-between;

space-around

Distribui espaço igual ao redor dos itens

1
2
3
justify-content: space-around;

space-evenly

Distribui espaço igual entre e ao redor dos itens

1
2
3
justify-content: space-evenly;

Teste Interativo

Clique nos botões para ver o efeito de cada valor:

A
B
C
Valor atual: flex-start
💡 Dica: justify-content é perfeito para alinhamento horizontal. Use space-between para layouts com elementos nas extremidades e center para centralizar facilmente!

Flex Direction

Como definir a direção dos itens no container flex

O que é Flex Direction?

A propriedade flex-direction define a direção do eixo principal do container flex, controlando como os itens são organizados: horizontalmente, verticalmente, ou em ordem reversa.

Demonstrações

row (padrão)

Organiza os itens horizontalmente, da esquerda para a direita

1
2
3
flex-direction: row;

row-reverse

Organiza os itens horizontalmente, da direita para a esquerda

1
2
3
flex-direction: row-reverse;

column

Organiza os itens verticalmente, de cima para baixo

1
2
3
flex-direction: column;

column-reverse

Organiza os itens verticalmente, de baixo para cima

1
2
3
flex-direction: column-reverse;

Teste Interativo

Clique nos botões para ver o efeito de cada direção:

A
B
C
Valor atual: row
💡 Dica: flex-direction controla o eixo principal! Com column, justify-content passa a controlar o eixo vertical. Essencial para layouts responsivos!

Flex Wrap

Como os itens se comportam quando não cabem no container

O que é Flex Wrap?

A propriedade flex-wrap controla se os itens flex devem quebrar para uma nova linha quando não cabem no container, ou se devem ser comprimidos na mesma linha.

Demonstrações

nowrap (padrão)

Todos os itens ficam na mesma linha, mesmo que seja necessário comprimir

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
flex-wrap: nowrap;

wrap

Os itens quebram para uma nova linha quando necessário

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
flex-wrap: wrap;

wrap-reverse

Os itens quebram para uma nova linha, mas na ordem reversa

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
flex-wrap: wrap-reverse;

Teste Interativo

Clique nos botões para ver como o wrap afeta o layout:

A
B
C
D
E
F
Valor atual: nowrap
💡 Dica: flex-wrap é fundamental para layouts responsivos! Use wrap para permitir quebra de linha automática e evitar overflow horizontal.

Align Items

Como alinhar itens no eixo transversal (vertical)

O que é Align Items?

A propriedade align-items controla como os itens flex são alinhados ao longo do eixo transversal (perpendicular ao eixo principal). Por padrão, alinha verticalmente quando flex-direction é row.

Demonstrações

stretch (padrão)

Os itens se esticam para preencher toda a altura do container

Item 1
Item 2
Com mais
conteúdo
Item 3
align-items: stretch;

flex-start

Alinha os itens no início do eixo transversal (topo)

Item 1
Item 2
Com mais
conteúdo
Item 3
align-items: flex-start;
💡 Dica: Itens mantêm suas alturas naturais e se alinham pelo topo - ideal para listas.

center

Centraliza os itens no eixo transversal

Item 1
Item 2
Com mais
conteúdo
Item 3
align-items: center;
💡 Dica: A forma mais fácil de centralizar verticalmente - funciona mesmo com alturas diferentes!

flex-end

Alinha os itens no final do eixo transversal (base)

Item 1
Item 2
Com mais
conteúdo
Item 3
align-items: flex-end;
💡 Dica: Útil para alinhar elementos na parte inferior, como rodapés de cards.

baseline

Alinha os itens pela linha de base do texto

Pequeno
Grande
Médio
align-items: baseline;
💡 Dica: Alinha pela linha do texto - essencial quando misturando diferentes tamanhos de fonte.

Teste Interativo

Clique nos botões para ver como o alinhamento afeta os itens:

A
B
Mais
Alto
C
Valor atual: stretch
💡 Dica: align-items controla o eixo transversal! Use center para centralização vertical fácil e stretch para cards de mesma altura.

Align-self - Alinhamento Individual

A propriedade align-self permite sobrescrever o align-items para um item específico.

O que é Align-self?

A propriedade align-self funciona como o align-items, mas aplicada individualmente a cada item flex. Ela permite que um item tenha um alinhamento diferente do resto do grupo.

Demonstrações

auto (padrão)

Herda o valor de align-items do container

auto
auto
auto
align-self: auto;
💡 Dica: Valor padrão - o item segue o align-items do container pai.

flex-start

Um item alinhado ao início, outros mantêm o padrão

flex-start
center (padrão)
center (padrão)
align-self: flex-start;
💡 Dica: Permite que um item específico quebre a regra do container - muito útil para exceções!

flex-end

Um item alinhado ao final

center (padrão)
flex-end
center (padrão)
align-self: flex-end;
💡 Dica: Ideal para destacar um elemento específico, como um badge ou indicador.

stretch

Um item se estica individualmente

center (padrão)
center (padrão)
stretch
align-self: stretch;
💡 Dica: Apenas um item ocupa toda a altura - útil para criar layouts assimétricos interessantes.

baseline

Alinhamento pela linha de base do texto

Texto Grande
baseline
Texto Pequeno
align-self: baseline;
💡 Dica: Apenas um item se alinha pela baseline - útil para tipografia consistente.

Combinação

Cada item com seu próprio alinhamento

flex-end
center
stretch
Cada item com align-self diferente
💡 Dica: O poder real do align-self - controle individual total sobre cada elemento!

Teste Interativo

Item 1
auto
Item 2
auto
Item 3
auto
💡 Dica: align-self permite que cada item tenha seu próprio alinhamento, independente do container!

Align Content

Como alinhar múltiplas linhas de itens (funciona apenas com flex-wrap)

O que é Align Content?

A propriedade align-content alinha as linhas do container flex quando há múltiplas linhas (quando flex-wrap: wrap está ativo). Controla o espaçamento entre as linhas no eixo transversal.

Demonstrações

stretch (padrão)

As linhas se esticam para preencher todo o espaço disponível

1
2
3
4
5
6
align-content: stretch;

flex-start

Alinha as linhas no início do container

1
2
3
4
5
6
align-content: flex-start;

center

Centraliza as linhas no container

1
2
3
4
5
6
align-content: center;

flex-end

Alinha as linhas no final do container

1
2
3
4
5
6
align-content: flex-end;

space-between

Distribui espaço igual entre as linhas

1
2
3
4
5
6
align-content: space-between;

space-around

Distribui espaço igual ao redor das linhas

1
2
3
4
5
6
align-content: space-around;

Teste Interativo

Clique nos botões para ver como o align-content afeta múltiplas linhas:

A
B
C
D
E
F
Valor atual: stretch
💡 Dica: align-content só funciona com flex-wrap: wrap! Controla o espaçamento entre múltiplas linhas de itens.

Flex Items - Propriedades dos Filhos

Agora vamos aprender as propriedades que aplicamos nos itens individuais

Flex Grow

Como os itens crescem para ocupar espaço disponível

O que é Flex Grow?

A propriedade flex-grow define quanto um item deve crescer em relação aos outros itens quando há espaço disponível no container. O valor padrão é 0 (não cresce).

Demonstrações

flex-grow: 0 (padrão)

Os itens mantêm seu tamanho original, sem crescer

Item 1
flex-grow: 0
Item 2
flex-grow: 0
Item 3
flex-grow: 0
flex-grow: 0;

flex-grow: 1

Todos os itens crescem igualmente para ocupar o espaço disponível

Item 1
flex-grow: 1
Item 2
flex-grow: 1
Item 3
flex-grow: 1
flex-grow: 1;

Valores diferentes

Itens crescem proporcionalmente aos seus valores de flex-grow

Item 1
flex-grow: 1
Item 2
flex-grow: 2
Item 3
flex-grow: 3
flex-grow: 1, 2, 3;

Apenas um item cresce

Apenas o item com flex-grow > 0 ocupa o espaço extra

Item 1
flex-grow: 0
Item 2
flex-grow: 1
Item 3
flex-grow: 0
flex-grow: 0, 1, 0;

Teste Interativo

Ajuste os valores de flex-grow para cada item:

A
flex-grow: 1
B
flex-grow: 1
C
flex-grow: 1
💡 Dica: flex-grow define como os itens ocupam espaço extra! Valores maiores = mais espaço. Use 1 para distribuição igual.

Flex Shrink

Como os itens encolhem quando não há espaço suficiente

O que é Flex Shrink?

A propriedade flex-shrink define quanto um item deve encolher em relação aos outros itens quando não há espaço suficiente no container. O valor padrão é 1 (encolhe normalmente).

Demonstrações

flex-shrink: 1 (padrão)

Todos os itens encolhem igualmente quando necessário

Item muito longo 1
flex-shrink: 1
Item muito longo 2
flex-shrink: 1
Item muito longo 3
flex-shrink: 1
flex-shrink: 1;

flex-shrink: 0

Os itens não encolhem, mantêm seu tamanho original

Item longo 1
flex-shrink: 0
Item longo 2
flex-shrink: 0
Item longo 3
flex-shrink: 0
flex-shrink: 0;

Valores diferentes

Itens encolhem proporcionalmente aos seus valores de flex-shrink

Item longo 1
flex-shrink: 1
Item longo 2
flex-shrink: 2
Item longo 3
flex-shrink: 3
flex-shrink: 1, 2, 3;

Apenas um não encolhe

Apenas os itens com flex-shrink > 0 encolhem

Item longo 1
flex-shrink: 1
Item longo 2
flex-shrink: 0
Item longo 3
flex-shrink: 1
flex-shrink: 1, 0, 1;

Teste Interativo

Ajuste os valores de flex-shrink para cada item (container pequeno para forçar encolhimento):

Item muito longo A
flex-shrink: 1
Item muito longo B
flex-shrink: 1
Item muito longo C
flex-shrink: 1
💡 Dica: flex-shrink controla como itens encolhem! Use 0 para impedir encolhimento e valores maiores para encolher mais rapidamente.

Flex Basis

Define o tamanho inicial dos itens antes da distribuição do espaço

O que é Flex Basis?

A propriedade flex-basis define o tamanho inicial de um item antes do espaço restante ser distribuído. É como definir uma largura base, mas específica para flexbox. O valor padrão é auto.

Demonstrações

flex-basis: auto (padrão)

O tamanho é baseado no conteúdo do item

Item A
flex-basis: auto
Item B com mais conteúdo
flex-basis: auto
Item C
flex-basis: auto
flex-basis: auto;

flex-basis: 0

Ignora o conteúdo, todos começam do tamanho zero

Item A
flex-basis: 0
Item B com mais conteúdo
flex-basis: 0
Item C
flex-basis: 0
flex-basis: 0;

flex-basis: valores fixos

Define tamanhos específicos em pixels

Item A
flex-basis: 100px
Item B
flex-basis: 150px
Item C
flex-basis: 200px
flex-basis: 100px, 150px, 200px;

flex-basis: porcentagens

Define tamanhos como porcentagem do container

Item A
flex-basis: 20%
Item B
flex-basis: 30%
Item C
flex-basis: 50%
flex-basis: 20%, 30%, 50%;

Teste Interativo

Ajuste os valores de flex-basis para cada item:

Item A
flex-basis: auto
Item B com mais conteúdo
flex-basis: auto
Item C
flex-basis: auto
💡 Dica: flex-basis define o tamanho inicial antes da distribuição! Use auto para basear no conteúdo ou valores fixos para controle total.

Flex Shorthand

Combina flex-grow, flex-shrink e flex-basis em uma única propriedade

O que é Flex Shorthand?

A propriedade flex é um shorthand que combina flex-grow, flex-shrink e flex-basis em uma única declaração. Sintaxe: flex: grow shrink basis. É a forma mais comum de trabalhar com flexbox.

Demonstrações

flex: initial (padrão)

Equivale a flex: 0 1 auto - não cresce, encolhe, tamanho baseado no conteúdo

Item A
flex: initial
Item B com mais conteúdo
flex: initial
Item C
flex: initial
flex: initial; /* 0 1 auto */

flex: 1

Equivale a flex: 1 1 0 - todos os itens crescem igualmente

Item A
flex: 1
Item B com mais conteúdo
flex: 1
Item C
flex: 1
flex: 1; /* 1 1 0 */

flex: auto

Equivale a flex: 1 1 auto - cresce e encolhe, tamanho baseado no conteúdo

Item A
flex: auto
Item B com mais conteúdo
flex: auto
Item C
flex: auto
flex: auto; /* 1 1 auto */

flex: none

Equivale a flex: 0 0 auto - não cresce nem encolhe, tamanho fixo

Item A
flex: none
Item B com mais conteúdo
flex: none
Item C
flex: none
flex: none; /* 0 0 auto */

Valores personalizados

Combinações específicas de grow, shrink e basis

Item A
flex: 2 1 100px
Item B
flex: 1 2 150px
Item C
flex: 3 1 50px
flex: 2 1 100px, 1 2 150px, 3 1 50px;

Teste Interativo

Escolha valores predefinidos de flex para cada item:

Item A
flex: 1
Item B com mais conteúdo
flex: 1
Item C
flex: 1
💡 Dica: flex é o shorthand mais usado! Use flex: 1 para distribuição igual, flex: auto para respeitar conteúdo e flex: none para tamanho fixo.

Order - Ordem Visual (Avançado)

Controla a ordem visual dos itens sem alterar o HTML - propriedade mais avançada

O que é Order?

A propriedade order permite alterar a ordem visual dos itens flex sem modificar a estrutura HTML. É uma das propriedades mais avançadas do Flexbox, especialmente útil para layouts responsivos. O valor padrão é 0. Itens com valores menores aparecem primeiro.

Demonstrações

order: 0 (padrão)

Todos os itens mantêm a ordem original do HTML

Primeiro
order: 0
Segundo
order: 0
Terceiro
order: 0
order: 0; (todos)

Reordenação simples

Alterando a ordem com valores positivos

Primeiro no HTML
order: 2
Segundo no HTML
order: 1
Terceiro no HTML
order: 3
order: 2, 1, 3;

Usando valores negativos

Valores negativos movem itens para o início

Primeiro
order: 0
Segundo
order: -1
Terceiro
order: 1
order: 0, -1, 1;

Caso prático: Layout responsivo

Reorganizando elementos para mobile (sidebar por último)

Header
order: 1
Sidebar
order: 3
Content
order: 2
Header: 1, Sidebar: 3, Content: 2

Teste Interativo

Ajuste a ordem de cada item (valores de -3 a 3):

Item A
(Primeiro no HTML)
order: 0
Item B
(Segundo no HTML)
order: 0
Item C
(Terceiro no HTML)
order: 0
💡 Dica Avançada: Order é perfeito para layouts responsivos onde você precisa reordenar elementos sem alterar o HTML!