Flexbox: layouts em uma dimensão
Organize uma linha ou coluna sem depender de margens mágicas.
Seu progresso neste dispositivo
0 de 6 aulasVocê escolhe quando uma aula está concluída.Começar o cursoPrograma do curso
Do primeiro conceito ao projeto
Flexbox começa pelo container, pelos itens e pelos eixosAtive o Flexbox no elemento certo, reconheça os itens flexíveis e use os eixos principal e transversal para prever o layout.PendenteDistribua espaço no eixo principal com justify-contentUse justify-content e margem automática para posicionar itens no eixo principal sem empurrões frágeis ou espaços desenhados na mão.PendenteAlinhe itens no eixo transversal com align-itemsControle o alinhamento transversal do grupo com align-items e ajuste uma exceção com align-self sem confundir os dois eixos.PendenteControle tamanho com flex-basis, grow e shrinkEntenda como o algoritmo flexível parte de uma base, reparte a sobra e reduz itens para criar componentes que cabem sem medidas frágeis.PendenteQuebre linhas com flex-wrap e separe itens com gapPermita que itens migrem para novas linhas, controle espaços com gap e entenda por que cada linha flexível distribui seu espaço separadamente.PendenteProjeto Flexbox: monte um checkout responsivoReúna eixos, alinhamento, tamanho flexível e quebra de linha num checkout que preserva conteúdo e foco em telas estreitas.Pendente
Depois da leitura
Continue estudando nos canais do Grupo Club
Os vídeos são complementares. Todo conceito, exercício e critério de conclusão já está explicado nas aulas em texto.
Prefere aprender em vídeo?
Tem aula sobre este assunto no nosso canal.
DevClub no YouTubeDominando Display Flex | Guia para iniciantesAssistir a aula
DevClub no YouTubeLIVE #29 - CSS FLEXBOX! Aprenda na Prática como posicionar elementos na páginaAssistir a aula