A Web: HTML e CSS

🧭 Flexbox a fundo

Alinhe e distribua qualquer coisa sem brigar com o CSS, centralização vertical incluída. Domine os eixos, o contêiner, os itens e os padrões de layout que você vai usar todos os dias.

O que você vai aprender

Distribuir e alinhar itens com justify-content (eixo principal) e align-items (eixo cruzado) de acordo com flex-direction
Repartir o espaço entre os itens com flex-grow, flex-shrink, flex-basis e o atalho flex
Centralizar elementos nos dois eixos e permitir várias linhas com flex-wrap e gap
Montar padrões reais: centralização perfeita, navbar com space-between e layouts com flex: 1

Lições

O contêiner flex: eixos e distribuiçãoflex-direction, justify-content, align-items, flex-wrap e gap. Os itens: grow, shrink, basis, self e orderflex-grow, flex-shrink, flex-basis, o atalho flex, align-self e order. Padrões reais: centralização, navbar e repartiçãoCentralização perfeita, barra de navegação logo/links e repartição do espaço.

Pratique este módulo no app

O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.

Comece grátis no app →