Os itens: grow, shrink, basis, self e order

A repartição do espaço sobrante

O contêiner define as regras gerais —direção e alinhamento—; os itens decidem como o espaço é repartido no eixo principal. Pense neles como amigos dividindo a conta: uns pagam partes iguais, outro faz questão de colocar sempre o mesmo valor. Isso é governado por três propriedades que quase sempre são escritas juntas por meio do atalho flex.

flex-basis: o tamanho de partida

flex-basis é o tamanho base do item no eixo principal antes de repartir sobras ou aplicar recortes. É como um width (ou height em coluna) que o flexbox usa como ponto de partida:

.item {
  flex-basis: 200px;   /* parte de 200px; auto usa o conteúdo */
}

flex-grow: como crescer se sobrar espaço

Se, depois de colocar todos os itens com seu flex-basis, sobrar espaço, flex-grow decide quem fica com ele. É um fator de proporção, não um tamanho:

.lateral { flex-grow: 0; }  /* não cresce (padrão) */
.centro  { flex-grow: 1; }  /* absorve TODO o espaço sobrante */

Se dois itens têm flex-grow: 1 e outro flex-grow: 2, o último recebe o dobro das sobras que cada um dos outros.

flex-shrink: como encolher se faltar espaço

Ao contrário: se faltar espaço, flex-shrink decide quem cede. Seu valor padrão é 1 (todos encolhem). Coloque 0 para que um item nunca se encolha abaixo de sua base, útil para logos ou ícones:

.logo { flex-shrink: 0; }   /* mantém seu tamanho mesmo sem espaço */

O atalho flex: grow shrink basis

Na prática você quase nunca escreve as três separadamente, e sim o atalho flex: <grow> <shrink> <basis>:

.item { flex: 1; }            /* = flex: 1 1 0  → repartem tudo em partes iguais */
.item { flex: 0 0 200px; }    /* tamanho fixo de 200px, nem cresce nem encolhe */
.item { flex: 1 1 300px; }    /* parte de 300px e reparte o resto */

⚠️ PEGADINHA CLÁSSICA: o atalho flex confunde porque flex: 1 não significa "largura 1", e sim flex: 1 1 0 (cresce, encolhe e parte do zero). Guarde dois de cabeça: flex: 1 ("repartam o espaço entre vocês") e flex: 0 0 auto ("fique com seu tamanho") e está tranquilo.

flex: 1 é o padrão estrela: um painel que ocupa "tudo o que sobrar" ao lado de outros de tamanho fixo.

align-self: a exceção ao align-items

align-self permite que um único item se alinhe diferente do resto no eixo cruzado, sobrescrevendo o align-items do contêiner:

.contenedor { display: flex; align-items: flex-start; }
.destacado  { align-self: center; }  /* só este se centraliza */

order: reordenar sem mexer no HTML

order muda a ordem visual dos itens (por padrão todos valem 0; os menores vêm antes). Útil para reordenar no responsivo, embora seja preciso usá-lo com cuidado, porque o HTML continua igual para leitores de tela:

.primero-visual { order: -1; }  /* aparece antes dos demais */