Observando a aula desenvolvi esse código, fui no style.css
e os links estão com margin: 1%;
, mas os elementos não respeitavam isso, causando um bug na responsividade. Usei o !important para driblar esse efeito e o resultado obtido apenas com flex-flow: row wrap;
já foi satisfatório, porém estão todos os elementos alinhados à esquerda. e qualquer outra alteraçãos nas medidas desses elementos muda até o !important
.
Fica meu git para melhor entendimento: https://github.com/Swolv-Lith/flexbox
/* ~ Main ~ */
.conteudoPrincipal-cursos {
display: flex;
flex-flow: row wrap;
}
.conteudoPrincipal-cursos-link {
width: 20%;
margin: 1%!important;
}
.conteudoPrincipal-cursos-link:nth-child(4n) {
margin-right: 0!important;
}
.conteudoPrincipal-cursos-link:nth-child(4n + 1) {
margin-left: 0!important;
}