1
resposta

Como funciona a quebra com flex-wrap

Ao declarar a altura de 250px e o flex-wrap na class = .rodapePrincipal-navMap-list me deparei com o seguinte problema: Insira aqui a descrição dessa imagem para ajudar na acessibilidadePara arrumar o problema ajustei o height para 260px, mas com isso comecei a pensar melhor sobre o funcionamento do flex-wrap e fiz alguns testes.

E se a coluna de frameworks tivesse apenas três cursos? e então comentei os três últimos cursos no html e ficou assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidadeEntão a melhor solução que encontrei foi criar uma div class=container para cada coluna de cursos assim posso remover ou adicionar quantos cursos eu quiser que a página não quebra.

O CSS ficou assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade E a página assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Não sei se essa seria a melhor forma de facilitar a manutenção, então gostaria de saber se fazer assim é correto e se existe alguma forma melhor de corrigir esse bug.

1 resposta

Olá, Daniel!

Você sacou muito bem o problema do flex-wrap quando os blocos não ficam agrupados dentro de uma div, ou qualquer outra tag como section, ou uma ul, por exemplo.

Esse mesmo problema aparece na minha tela.

Estamos lançando em breve um novo curso de flexbox, será minha estreia como instrutor em cursos, e no projeto separei os blocos em section, justamente para evitar que isso ocorra.

Bons estudos! :)