CSS: Itens Flexbox CSS

Última atualização: 2026-10-13

Propriedades de itens Flexbox dão controle fino sobre filhos individuais dentro de um contêiner flex.

Propriedades nesta seção: flex-grow flex-shrink flex-basis flex order align-self align-items

1. Propriedades de Itens Flex

(1) Referência Rápida

Propriedade	Valores	Finalidade
`flex-grow`	`0`, `1`, `2`, ...	Quanto o item cresce em relação aos irmãos
`flex-shrink`	`0`, `1`, `2`, ...	Quanto o item encolhe em relação aos irmãos
`flex-basis`	`auto`, `100px`, `50%`	Tamanho inicial antes de crescer/encolher
`flex`	`1`, `0 0 200px`, `1 1 auto`	Abreviação para grow, shrink, basis
`order`	`0`, `1`, `-1`	Ordem visual (não afeta DOM)
`align-self`	`auto`, `flex-start`, `flex-end`, `center`	Sobrescreve align-items do pai

2. flex-grow

Controla quanto um item flex cresce em relação a outros itens:

▶ Exemplo

▶ Experimente

3. flex: 1 Abreviação

flex: 1 é a abreviação mais comum:

▶ Exemplo

▶ Experimente

flex: 1 significa flex-grow: 1; flex-shrink: 1; flex-basis: 0% — "crescer para preencher espaço disponível igualmente."

4. order

Muda a ordem visual sem afetar a ordem do DOM:

▶ Exemplo

▶ Experimente

Nota: order apenas muda a ordem visual, não a ordem do DOM. Leitores de tela ainda seguem a ordem do DOM.

5. align-self

Sobrescreve align-items do pai para itens individuais:

▶ Exemplo

▶ Experimente

Propriedades nesta seção: flex-grow flex-shrink flex-basis flex order align-self align-items

❓ Perguntas Frequentes

P O que significa flex: 1?

R flex: 1 é abreviação para flex-grow: 1; flex-shrink: 1; flex-basis: 0% — significando "crescer para preencher espaço restante." Quando múltiplos itens têm flex: 1, eles compartilham igualmente a largura do contêiner.

P order afeta a estrutura do DOM?

R Não. order apenas muda o arranjo visual, a ordem do DOM permanece a mesma. Leitores de tela ainda seguem a ordem do DOM, então não use order para ordenação apenas visual — afeta acessibilidade.

P Qual tem maior prioridade: align-self ou align-items?

R align-self tem maior prioridade. Age em itens individuais, sobrescrevendo o align-items do pai. Por exemplo, pai define align-items: center para alinhamento centralizado, mas um filho pode definir align-self: flex-start para alinhar ao topo individualmente.

📖 Resumo

Propriedades de itens Flexbox permitem controlar finamente a ordem e tamanho de cada filho
flex: 1 é a abreviação de divisão igual mais comum; order ajusta ordem visual sem mudar HTML; align-self permite que elementos individuais "se destaquem"
Lembre-se: propriedades do contêiner controlam o geral, propriedades do item controlam o individual

📝 Exercícios

Crie um contêiner flex com 5 itens. Use order para mostrar o 3º item primeiro e o 1º item por último.
Use flex-grow para implementar "três colunas iguais," depois faça a coluna central ter o dobro da largura das laterais.
Crie um layout "barra lateral fixa + conteúdo adaptativo": barra lateral usa flex: 0 0 250px, conteúdo usa flex: 1.
Em um contêiner, alinhe os dois primeiros itens ao topo e o terceiro ao fundo usando align-self.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós