CSS Flexbox em 20 Minutos

Entendendo o display: flex

Quando você aplica display: flex num container, os filhos são
organizados automaticamente em linha ( row ) ou coluna ( column ).
Padrão? Flexbox posiciona na horizontal.

Como criar um contêiner Flexbox

Direção dos elementos: row vs column

flex-direction: row organiza itens horizontalmente. Já flex-direction: column empilha um abaixo do outro. A propriedade muda
completamente o comportamento de alinhamento.

Alinhando com justify-content

justify-content alinha elementos ao longo do eixo principal (definido
por flex-direction ). row ? Eixo horizontal. column ? Vertical.

Entendendo align-items

align-items alinha no eixo perpendicular ao principal. flex-direction: row ? Alinhamento vertical. column ? Horizontal.

Centralização completa com Flexbox

Quer centralizar tudo no centro da div pai? Aplique: display: flex , justify-content: center e align-items: center . Simples assim.

Como funciona o gap entre elementos

Use gap pra espaçar automaticamente todos os filhos. Mesmo valor
funciona pra colunas e linhas — sem precisar de margin .

Compreendendo width e height automáticos

Sem definir altura ou largura, elementos ocupam 100% do espaço no eixo principal se
tiverem display: block . Com Flexbox, isso muda conforme as propriedades de
alinhamento.

Centralizando conteúdo dentro de um retângulo

Dá pra aplicar display: flex direto nos filhos (tipo uma div retângulo) e usar justify-content e align-items pra
centralizar o conteúdo interno — textos ou ícones.

Importância do Flexbox em layouts

Outros valores de justify-content

Além de center , teste space-between , space-around e space-evenly . Distribuem elementos com padrões diferentes de espaçamento.

Start, Center, End: atenção aos eixos

Entender eixo principal e cruzado evita erros. Exemplo: justify-content: start no eixo horizontal alinha à esquerda com row e ao topo com column .

Espaçamento com space-between

space-between empurra primeiro item pra esquerda e último pra direita,
distribuindo espaço igual entre os elementos do meio.

Diferença entre space-around e space-evenly

space-around aplica meio espaço nas extremidades. Já space-evenly garante espaçamento idêntico entre tudo — elementos e bordas.

Quando alinhar com margin versus flex

Quando usar Flexbox ao invés de Grid

Visualizando os efeitos com browser

Use a inspeção de elementos do navegador pra identificar display, espaçamentos e direção
em tempo real.