CSS flexbox: alinhamento
O curso apresenta o alinhamento no flexbox, com o eixo principal na fileira padrão, da esquerda para a direita. Começa com display: flex, os papéis de container flex e item flex e os eixos principal e transversal. Depois trata de justify-content no eixo principal e de align-items no eixo transversal, incluindo o padrão stretch. As aulas seguintes mostram como centralizar nas duas direções, sobrescrever um item com align-self e espaçar com gap. A última aula monta uma navbar e um overlay centralizado com pequenos containers flex aninhados.
O que você vai aprender
- ✓Como display: flex transforma os filhos diretos em itens flex com eixo principal e transversal
- ✓Como justify-content distribui o espaço que sobra com flex-start, center e os valores space-*
- ✓Como align-items posiciona itens no eixo transversal e por que stretch é o padrão
- ✓Centralizar conteúdo nas duas direções com justify-content e align-items
- ✓Sobrescrever o alinhamento de um item com align-self
- ✓Espaçar itens com gap, row-gap e column-gap em vez de margens
Do fluxo ao flexbox: display: flex
O curso passado cobriu o fluxo normal: caixas block empilhando e caixas inline fluindo com o texto. Ele faz bem as duas coisas. Mas três pedidos de layout muito comuns não têm resposta limpa no fluxo normal. "Coloque estes três itens numa fileira, bem espaçados." "Centralize esta caixa na…
Ler a aula completa grátis →Currículo
7 aulasDo fluxo ao flexbox: display: flex
Liga o display: flex e define container flex, itens flex, eixo principal e eixo transversal.
justify-content: posicionando ao longo do eixo principal
Mostra como justify-content posiciona itens no eixo principal com seis valores, de flex-start a space-evenly.
align-items: posicionando ao longo do eixo transversal
Explica align-items no eixo transversal, o padrão stretch e os valores flex-start, flex-end, center e baseline.
Centralizando com flexbox
Centraliza itens na horizontal e na vertical com duas declarações e compara com técnicas antigas e frágeis.
align-self: sobrescrevendo o alinhamento de um item
Usa align-self num único item flex para sobrescrever o align-items do container sem afetar os irmãos.
gap: espaçamento entre itens sem gambiarras de margem
Troca as gambiarras de margem com :last-child pelo gap, que adiciona espaço só entre itens vizinhos.
Juntando tudo: uma navbar e um card centralizado
Monta uma navbar e um overlay com modal centralizado combinando pequenos containers flex aninhados.