CSS Flexbox em 20 Minutos

Entendendo o display: flex

Quando você aplica display: flex num container, os filhos são organizados automaticamente em linha ( <em>row</em> ) ou coluna ( <em>column</em> ). 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 <code>flex-direction</code> ). <code>row</code> ? Eixo horizontal. <code>column</code> ? Vertical.

Entendendo align-items

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

Centralização completa com Flexbox

Quer centralizar tudo no centro da div pai? Aplique: <code>display: flex</code> , <code>justify-content: center</code> e <code>align-items: center</code> . 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 <code>margin</code> .

Compreendendo width e height automáticos

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

Centralizando conteúdo dentro de um retângulo

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

Importância do Flexbox em layouts

Outros valores de justify-content

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

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

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

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.