2
respostas

Não entendi como o professor fez os últimos elementos do rodapé, ficarem totalmente a esquerda no curso Flexbox: posicionando elementos na tela : 03 Terminando course grid

Alguém poderia explicar? Acabou que o professor não mencionou na aula como ele fez isso exatamente, e só falou dos "nth:child()" que usou para eliminar os espaços da esquerda e da direita dos elementos. Mas esqueceu de mencionar, qual foi o código responsável em fazer os 2 últimos elementos irem todos para a esquerda. Coloquei essa pergunta aqui, porque não há opção lá no fórum do curso mencionado acima de colocar novo tópico, acredito que está com erro na codificação do site. Será que teria como vocês verificarem isso também? Hoje é dia 28/05/2021. Aqui a imagem do que me refiro: Logo abaixo os códigos HTML e CSS mencionados na aula e lembrando que só coloquei só os códigos relacionado ao assunto, pois não há espaço suficiente:

<div class="container">
            <h2 class="subtitulo">Nossos cursos</h2>

            <nav>
                <ul class="conteudoPrincipal-cursos">
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Java</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">PHP</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Ruby on Rails</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">.NET</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Pascal</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Flexbox</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Desenvolvimento Web</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Java Web</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Javascript</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">AngularJS</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">TDD com C</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Redes de computadores</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">MySQL</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">MariaDB</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Postegres</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                </ul>
            </nav>
        </div>
.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

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

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

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

Olá Marcos Vitor, eu estava com o mesmo problema, na aula anterior ele pediu pra colocar o justify-content: space-between;

.conteudoPrincipal-cursos { display: flex; flex-wrap: wrap; justify-content: space-between; }

é só remover o elemento, no meu caso funcionou, justify-content: space-between;

OBS: nos arquivos baixados na primeira aula, ja vieram com a partes das aulas de mobile configuradas.

Não foi exatamente disso que eu tinha falado. No meu caso até deu certo. O que não entendi, foi a respeito apenas do porquê que os últimos elementos do rodapé ficaram à esquerda. É isso que não entendi. Gostaria de saber apenas o porquê disso. Qual foi o código responsável por isso? E não se trata de um problema. O código está correto na verdade