Capítulo 27: Flexbox - Alinhamento de Conteúdo

Introdução

• Continuação dos estudos sobre Flexbox.
• Foco no alinhamento de conteúdo empacotado.
• Importância do Capítulo 27 do material de apoio.
• Sexta ou sétima aula sobre flex containers.

Revisão Rápida

• Alinhamento no eixo principal e transversal.
• Centralização de itens flexíveis.
• Conceito de "conteúdo empacotado" (quando os elementos quebram usando flex-wrap).

Flex-Wrap e Conteúdo Empacotado

• flex-wrap com valor nowrap: elementos não quebram, encolhem até o limite.
• flex-wrap com valor wrap: elementos quebram e são reposicionados quando não cabem na mesma linha, ex.: em telas menores.

Alinhamento de Conteúdo: Propriedade align-content

• Objetivo: Decidir o que acontece com o espaço em branco quando os itens se quebram e empacotam.
• Consome Tempo e Confusão: Justify Content, Align Items e Align Content são propriedades frequentemente confundidas.

Diferenças Entre Propriedades de Alinhamento

• justify-content: Alinha itens no eixo principal.
• align-items: Alinha itens no eixo transversal.
• align-content: Alinha itens no eixo transversal quando estão empacotados.

Valores da Propriedade align-content

Stretch (Padrão)

• Divide o eixo transversal igualmente entre as linhas de itens.
• Aloca e estende os itens para preencher o contêiner.

Flex Start

• Alinha itens junto ao início do eixo transversal, reservando espaço livre na parte oposta.

Flex End

• Alinha itens junto ao final do eixo transversal, reservando espaço livre no início.

Center

• Centraliza itens no eixo transversal, dividindo igualmente o espaço livre em cima e embaixo.

Space Between

• Distribui o espaço livre igualmente entre as linhas de itens.
• Fixação das primeiras e últimas linhas próximas aos limites do eixo transversal.

Space Evenly

• Distribui todos os itens com espaços equidistantes no eixo transversal, incluindo espaço antes e depois dos itens.

Space Around

• Divide espaço transversal em partes iguais e centraliza os itens nelas.
• Espaço livre é dividido de forma que cada linha tenha espaço igual antes e depois.

Exemplificação Prática

• Configuração de um exemplo no Visual Studio Code e GitHub Desktop.
• Alterações no CSS para demonstrar cada valor de align-content.
• Uso de inspector de código para ver comportamento de align-content na prática.

Conclusão

• Finalização das propriedades para contêiners flexíveis.
• Introdução futura às propriedades para itens internos.
• Motivação para continuar assistindo às aulas e valorizar patrocinadores.