EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Itens Flexbox CSS

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

Propriedades de Itens Flex

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

flex-grow

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

Exemplo

HTML 
<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item-1 { flex-grow: 1; background: #3498db; padding: 10px; color: white; }
.item-2 { flex-grow: 2; background: #e74c3c; padding: 10px; color: white; }
.item-3 { flex-grow: 1; background: #2ecc71; padding: 10px; color: white; }
</style>
<div class="container">
  <div class="item-1">grow: 1</div>
  <div class="item-2">grow: 2 (duas vezes mais largo)</div>
  <div class="item-3">grow: 1</div>
</div>
▶ Experimente

flex: 1 Abreviação

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

Exemplo

HTML 
<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  flex: 1;
  background: #9b59b6;
  padding: 10px;
  color: white;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">Igual</div>
  <div class="item">Igual</div>
  <div class="item">Igual</div>
</div>
▶ Experimente

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

order

Muda a ordem visual sem afetar a ordem do DOM:

Exemplo

HTML 
<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #f39c12;
  padding: 10px;
  color: white;
}
.item:nth-child(2) { order: -1; } /* Move para frente */
</style>
<div class="container">
  <div class="item">1º no DOM</div>
  <div class="item">2º no DOM (visualmente primeiro)</div>
  <div class="item">3º no DOM</div>
</div>
▶ Experimente

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

align-self

Sobrescreve align-items do pai para itens individuais:

Exemplo

HTML 
<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background: #f5f5f5;
  gap: 10px;
  padding: 10px;
}
.item {
  background: #e74c3c;
  padding: 10px;
  color: white;
}
.item:nth-child(2) { align-self: flex-end; }
.item:nth-child(3) { align-self: flex-start; }
</style>
<div class="container">
  <div class="item">Centro (padrão)</div>
  <div class="item">Baixo (align-self)</div>
  <div class="item">Topo (align-self)</div>
</div>
▶ Experimente

❓ Perguntas Frequentes

Q 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.
Q 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.
Q 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

📝 Exercícios

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