Guia completa de CSS Flexbox: domine layouts flexiveis em 2026

CSS Flexbox e um modelo de layout unidimensional criado para distribuir espaco e alinhar elementos dentro de um contêiner de forma previsivel. Ele resolve com elegancia problemas antigos de CSS que antes exigiam floats, tabelas ou posicionamento absoluto.

Na pratica, Flexbox facilita o centramento vertical, a distribuicao proporcional do espaco, a criacao de componentes responsivos e o alinhamento consistente em diferentes tamanhos de tela.

• Centrado vertical: muito mais simples do que nos metodos antigos
• Espaco flexivel: itens podem crescer, encolher e quebrar automaticamente
• Layout responsivo: muitos casos funcionam bem com poucas regras

Se quiser testar cada propriedade enquanto le, abra nosso playground de Flexbox.

Tudo comeca quando o elemento pai recebe display: flex. A partir dai, os filhos diretos viram flex items.

Por padrao, os itens ficam em linha horizontal, nao quebram para a proxima linha, comecam no inicio do eixo principal e se esticam no eixo cruzado.

Valor	Eixo principal	Direcao
row	Horizontal	Esquerda para direita
row-reverse	Horizontal	Direita para esquerda
column	Vertical	Cima para baixo
column-reverse	Vertical	Baixo para cima

flex-wrap controla a quebra dos itens, e flex-flow permite combinar direcao e wrap em uma unica declaracao.

justify-content alinha no eixo principal, enquanto align-items alinha no eixo cruzado. Essas duas propriedades sao a base da maior parte dos layouts com Flexbox.

Propriedade	Uso
justify-content: center	Centraliza no eixo principal
space-between	Distribui espaco entre os itens
align-items: center	Centraliza no eixo cruzado
align-items: stretch	Estica os itens para preencher o eixo cruzado

Quando existem varias linhas, align-content distribui essas linhas. Para espacamento entre elementos, gap e a opcao mais limpa.

As propriedades dos itens controlam como cada elemento usa o espaco disponivel.

• flex-grow: quanto o item pode crescer
• flex-shrink: quanto o item pode encolher
• flex-basis: tamanho base antes da redistribuicao

O atalho flex combina as tres. flex: 1 cria um item flexivel, flex: none impede mudancas de tamanho e flex: 0 0 250px define um item fixo.

align-self ajusta o alinhamento de um item individual, enquanto order altera apenas a ordem visual.

Flexbox e excelente para padroes recorrentes de interface.

• Centralizacao perfeita: display: flex; justify-content: center; align-items: center;
• Navbar: justify-content: space-between para separar logo e menu
• Sticky footer: wrapper em coluna com min-height: 100vh e conteudo principal em flex: 1
• Ultimo item a direita: margin-left: auto
• Sidebar + conteudo: sidebar fixa com flex: 0 0 280px e area principal com flex: 1

Voce pode experimentar esses casos no playground de Flexbox.

Para grids de cards, um padrao comum e usar display: flex; flex-wrap: wrap; gap: 24px; no contêiner e flex: 1 1 300px; nos cards. Assim, cada item tenta manter 300px de largura e cresce quando sobra espaco.

Ja o holy grail layout combina header, footer, sidebars e conteudo principal. Um wrapper em coluna define a altura da tela, e a zona central vira outro contêiner flex.

• Wrapper externo: display: flex; flex-direction: column; min-height: 100vh;
• Area central: display: flex; flex: 1;
• Sidebar: flex: 0 0 200px;
• Conteudo principal: flex: 1;

Outro beneficio: cards na mesma linha podem manter alturas semelhantes com pouco esforco.

Flexbox funciona melhor em layouts unidimensionais. CSS Grid e mais forte quando voce precisa controlar linhas e colunas ao mesmo tempo.

• Use Flexbox em navbars, cards, formularios e alinhamento interno
• Use Grid para a estrutura geral de pagina e grades mais complexas

Recurso	Flexbox	Grid
Dimensao	1D	2D
Forca principal	Distribuicao e alinhamento	Estrutura visual
Uso comum	Componentes	Layout de pagina

Na pratica, os dois se complementam bem. Teste isso no playground de Flexbox e no gerador de CSS Grid.

Alguns erros aparecem com frequencia em projetos com Flexbox:

• Esquecer que flex-shrink vale 1 por padrao
• Usar width em vez de flex-basis dentro de um contexto flex
• Nao aplicar min-width: 0 quando texto precisa truncar
• Tentar montar grids 2D complexos apenas com Flexbox

Dicas uteis:

• margin-left: auto empurra um item para o lado oposto
• flex: 1 1 0% distribui o espaco de forma mais equilibrada
• Contêineres flex aninhados ajudam a construir interfaces complexas
• order muda a ordem visual, mas nao a ordem de leitura para acessibilidade

Para praticar e depurar mais rapido, use nosso playground interativo de Flexbox.