Alinhe itens no eixo transversal com align-items

Uma linha com cartões de textos diferentes costuma revelar o próximo problema: um item parece alto, outro fica no topo e um botão não acompanha o restante. Nesta aula, você vai controlar essa relação no eixo que cruza a direção do Flexbox.

align-items define o alinhamento dos itens no eixo transversal do container. Pense em livros de alturas diferentes apoiados numa prateleira. Você pode alinhar as bases, os centros ou as bordas superiores. A prateleira é o container, os livros são itens e a altura disponível é o eixo transversal. O limite aparece quando lembramos que CSS não trabalha com objetos rígidos: o valor stretch pode ajustar o tamanho automático dos itens para preencher o container.

Mova o grupo no eixo que cruza a direção

Com flex-direction: row, o eixo principal costuma ser horizontal e o transversal, vertical. Dê altura ao container para tornar o movimento visível:

.ofertas {
  display: flex;
  min-height: 240px;
  align-items: flex-start;
}

flex-start coloca os itens no começo transversal. center centraliza; flex-end leva ao final. Se você trocar a direção para column, o eixo transversal passa a ser horizontal, portanto os mesmos valores mudam o posicionamento lateral.

O valor inicial é stretch. Ele estica itens cuja dimensão transversal está em auto:

.ofertas {
  display: flex;
  align-items: stretch;
}

Isso explica por que cartões numa fileira frequentemente aparecem com a mesma altura. Se você declarar uma altura própria no item, o navegador respeita essa dimensão e deixa de esticá-lo naquele eixo. Stretch não iguala o conteúdo nem resolve sozinho a posição dos elementos internos do cartão.

Crie uma exceção com align-self

align-items estabelece a regra do grupo. align-self substitui essa decisão em um item:

.ofertas {
  display: flex;
  align-items: flex-start;
}

.promocao {
  align-self: stretch;
}

A exceção deve comunicar uma intenção real, como destacar uma oferta, e não compensar um HTML desorganizado. Se cada cartão recebe um align-self diferente, provavelmente não existe mais uma regra de alinhamento para o conjunto.

Não troque alinhamento por tentativa

Aplicar vertical-align: middle a itens flexíveis é um erro recorrente; essa propriedade não é o controle de alinhamento do Flexbox. Outro tropeço é usar align-content esperando mover itens de uma única linha. align-content distribui linhas flexíveis quando existe wrap e sobra transversal. Para os itens da linha atual, use align-items.

Texto também oferece o alinhamento baseline. Em vez de comparar as bordas das caixas, o navegador aproxima as linhas de base tipográficas dos itens. Isso ajuda quando preço e rótulo usam tamanhos de fonte diferentes. Teste com um texto grande e outro pequeno: center centraliza as caixas; baseline alinha a base do texto. Nenhum deles é mais correto sem saber a relação visual desejada.

No laboratório, teste stretch, flex-start e center sem mudar outra propriedade. Observe o contorno do container e diga qual espaço transversal está disponível. Depois aplique align-self somente ao cartão em promoção. A missão termina com três cartões de conteúdos diferentes, uma regra comum e uma única exceção justificada. Inverta para column e confirme que o movimento passa para o sentido lateral; essa mudança prova que você está seguindo os eixos em vez de decorar “vertical”.