Entrar Ainda não tem acesso?
2
respostas

Houve alguma atualização?

Referente ao curso Flexbox: posicione elementos na tela

por Arthur Mitsuo Matsuzaka Ferreira
| 114.1k xp | 9 posts

Bom dia/tarde ou boa noite,

resolvendo as atividades e seguindo os vídeos do 3º módulo, notei que ao utilizar

.conteudoPrincipal-cursos{ 
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-end;
}
.conteudoPrincipal-cursos-link{ 
    width: 20%; 
}

o Layout separou automaticamente os items e alinhou a última linha a esquerda, diferente do mostrado no vídeo, assim como os 25% de width utilizados não funcionaram no meu caso, por isso deixei em 20%. Por isso gostaria de saber se é fruto de alguma atualização do css, me deixou em dúvida

2 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Arthur, tudo bem? Que eu saiba não mudou não, acho que pode ser por conta de resolução e tamanhos de telas diferentes ou algum outro detalhe.

Espero ter ajudado.

por Luis Felipe Gentil Menardi
| 29.4k xp | 1 posts
Estagiário de Produto

Comigo aconteceu o mesmo e verifiquei aqui no forum. A razão é por conta do arquivo style.css já ter uma resposta responsiva pensando na margem dos cards que vão ficar na direita e na esquerda. Caso queira verificar como fazer igual ao do instrutor é só tirar a parte que tem .nth-child() do style.css, vou deixar aqui em baixo como tá no arquivo (:

@media(min-width: 1000px) {
    .conteudoPrincipal-cursos-link {
        margin: 1.333%;
    }

    .conteudoPrincipal-cursos-link:nth-child(3n) {
        margin-right: 1.33%;
    }

    .conteudoPrincipal-cursos-link:nth-child(3n+1) {
        margin-left: 1.333%;
    }

    .conteudoPrincipal-cursos-link:nth-child(4n) {
        margin-right: 0;
    }

    .conteudoPrincipal-cursos-link:nth-child(4n+1) {
        margin-left: 0;
    }

    .videoSobre-sobre {
        margin-left: 1.5em;
    }

}