Entrar Ainda não tem acesso?
3
respostas

Resolvi apenas trocando o space-between de local!

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Grid principal e limitações do flexbox e atividade Terminando course grid

por RONALDO RODRIGUES DE ALMEIDA
| 57.3k xp | 24 posts

Ao invés de colocar o justify-content: space-between .conteudoPrincipal-curso eu coloquei no .conteudoPrincipal-cursos-link, tem algum problema? Porque eu mesmo não entendi porque isso funcionou.

CSS:

.cabecalhoPrincipal .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav {
    display:flex;
}

.rodapePrincipal-patrocinadores .container {
    display: flex;
    justify-content: space-between;
}

.rodapePrincipal-patrocinadores-list {
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: space-around;
    margin-right: 5%;
}

.rodapePrincipal-contatoForm {
    width: 25%;
}

.rodapePrincipal-contatoForm-fieldset {
    display:flex;
}

.rodapePrincipal-navMap-list {
    display: flex;
    flex-flow: column wrap;
    height: 250px;
}

/*Local onde eu troquei o justify-content: space-between; de lugar*/

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
    width:23%;
    justify-content: space-between;
    margin-bottom: 1%;
}
3 respostas
por Ademir Jr
| 89.8k xp | 1 posts

Aqui nem precisei de nenhum justify. Meu código ficou somente com estas configurações e está perfeito. Não entendi que mudança fizeram nos arquivos p/ baixa, mas não está refletindo no vídeo e nem possui errata na transcrição da aula.

A dúvida que fica é porque não precisamos das correções, fiquei mais confuso ainda.

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
    width: 20%;
}
por RONALDO RODRIGUES DE ALMEIDA
| 57.3k xp | 24 posts

Ademir, com esse código os elementos não ficam com um espaçamento legal e eles não ocupam toda a tela, e a intenção do professor pelo que eu entendi, era exatamente fazer com que os elementos ocupassem toda a tela e que ainda continuassem com um espaçamento legal para não parecer estranho, daí com esse seu código, os elementos não só ficam menores do que o desejado, como também ficam mais pro lado esquerdo do que para o direito visualmente.

por Paulo Marques Telles de Souza
| 53.4k xp | 3 posts

Ronaldo, boa tarde.

Na verdade a correção só funcionou pois na aula quando o professor apresentava o conteúdo ele ainda não tinha no CSS a aplicação do nth-child(), no arquivo que baixamos da aula, o mesmo já veio no CSS do arquivo style.css, por isso você conseguiu resolver apenas aplicando essa parte, mas observe que se não tivesse vindo no CSS principal, você teria que fazer esses mesmos passos.

@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;
}