Eixos e alinhamento
Centralizar um elemento verticalmente já foi motivo de piada na comunidade de CSS. Com Flexbox, é praticamente uma linha só.
Estudar esta lição interativa →Antes do Flexbox, alinhar elementos lado a lado (e principalmente centralizá-los verticalmente) exigia truques pouco intuitivos. O Flexbox (display: flex) resolve isso de forma direta: ele transforma um elemento num contêiner flexível, e organiza os filhos dele ao longo de um eixo.
Pense numa fila de pessoas numa balada: display: flex é decidir que elas vão ficar em fila (em vez de espalhadas pela pista). O justify-content decide onde a fila fica encostada (na entrada, no fundo, ou espalhada com espaço igual entre cada pessoa); o align-items decide a altura em que cada pessoa fica alinhada na fila (rente ao chão, no meio, no topo).
O Flexbox organiza tudo em torno de dois eixos: o principal (horizontal aqui), que justify-content distribui, e o transversal (vertical), que align-items alinha, mesmo com itens de alturas diferentes.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. display:flex enfileira os itens; align-items:center os alinha na mesma altura vertical; gap dá espaço uniforme entre eles.
Um exemplo de produto real: qualquer barra de navegação com o logo à esquerda e os links perfeitamente alinhados verticalmente com ele, mesmo tendo tamanhos de fonte diferentes, resolve isso com display: flex e align-items: center no contêiner. É um dos usos mais comuns de Flexbox em qualquer site.
display: flex só afeta os filhos diretos do elemento, não os netos. Se um layout "não vira flex" mesmo com a propriedade certa, confira se você está aplicando display: flex no elemento pai correto, o que contém diretamente os itens que você quer alinhar.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione align-items: center.