1
resposta

Aula 3 - Problema com Grid Principal

Fiz todos procedimentos da aula e no final o grid principal de cursos ficou com alguns elementos desalinhados na exibição da página.

O espaço entre alguns cursos na página estão maiores que outros. Gostaria de saber o que pode estar acontecendo?

Abaixo o código que coloquei até agora do flexbox.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;
    justify-content: space-around;
    width: 70%;
    margin-right: 5%;
}

.rodapePrincipal-contatoForm {
    width: 25%;
}

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

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

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

.conteudoPrincipal-cursos-link {
    width: 23%;
    margin: 1%;
}

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

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

Fala ai Rafael, tudo bem? Se o código estiver equivalente ao da aula, pode ser por conta do tamanho da tela ser diferente, a sua resolução é maior do que a do instrutor durante a gravação das aulas.

Ou pode ser também por questões de espaçamentos internos (padding) ou externos (margin) e até por versões ou navegadores diferentes.

Espero ter ajudado.