Aula 13 — Flexbox: fundamentos

Durante muito tempo, alinhar elementos no CSS foi difícil. Centralizar algo verticalmente, então… um pesadelo 😅

O Flexbox (Flexible Box Layout) surgiu para resolver isso de forma simples, previsível e poderosa.

O que é Flexbox?

Flexbox é um modelo de layout unidimensional. Ele organiza elementos em linha ou coluna.

Ele funciona sempre com dois papéis:

• Container flex — o elemento pai
• Itens flex — os elementos filhos

Ativando o Flexbox

Para usar Flexbox, basta definir display: flex no elemento pai.

 .container { display: flex; } 

A partir desse momento, todos os filhos passam a ser itens flex.

Eixo principal e eixo cruzado

O Flexbox trabalha com dois eixos:

• Eixo principal (main axis)
• Eixo cruzado (cross axis)

Por padrão:

• Eixo principal → horizontal
• Eixo cruzado → vertical

Direção dos itens — flex-direction

A propriedade flex-direction define a direção do eixo principal.

 .container { display: flex; flex-direction: row; } 

Valores comuns:

• row — linha (padrão)
• column — coluna

Alinhamento no eixo principal — justify-content

O justify-content controla o alinhamento dos itens no eixo principal.

 .container { display: flex; justify-content: center; } 

Valores comuns:

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

Alinhamento no eixo cruzado — align-items

O align-items controla o alinhamento dos itens no eixo cruzado.

 .container { display: flex; align-items: center; } 

Valores comuns:

• stretch (padrão)
• flex-start
• center
• flex-end

Centralização perfeita (o clássico)

Com Flexbox, centralizar algo ficou simples:

 .container { display: flex; justify-content: center; align-items: center; } 

Flexbox não é para tudo

Flexbox é excelente para:

• Menus
• Cards em linha ou coluna
• Centralizações

Mas para layouts bidimensionais mais complexos, o ideal é usar CSS Grid (veremos em breve 😉).

Na próxima aula, vamos usar o Flexbox na prática, criando menus, cards e layouts reais 💪✨