4
respostas

Margens Corrigidas Automaticamente

Olá, tudo bem? Seguindo a lógica do vídeo, o layout quebra; porém, escrito como abaixo, as margens são corrigidas automaticamente. Alguém sabe explicar o motivo? Por que eu fiquei sem entender.

.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-fieldset {
    display: flex;
}

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

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

.conteudoPrincipal-cursos-link {
    width: 23%;
}
4 respostas

Fala aí Anderson, tudo bem? Como faz tempo que eu fiz esse curso eu não sei como foi feito na aula.

Consegue me mandar os dois códigos para que eu possa ver a diferença? Ficaria mais fácil tentar entender e lhe explicar o motivo.

Fico no aguardo.

Claro. Segue abaixo código da aula.

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

aqui também deu certinho, bateu com o layout, sem bug do flexbox jogar o ultimo curso pro canto,

Agora estou confuso, qual é o código correto e outro errado?

O primeiro código que você mandou está funcionando, porém, no segundo código para funcionar você teve que fazer aqueles ajustes?

Consegue me mandar o HTML também? Preciso simular o projeto para entender melhor e lhe explicar o porque.

Fico no aguardo, bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software