4
respostas

Eu usei o flex-grow. esta correto..?



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


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



    <main class="conteudoPrincipal">
        <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>
4 respostas

Oi, Braz, tudo bem?

O que exatamente você deseja fazer com o flex-grow? Usá-lo para utilizar os espaços entre os links?

O flex-grow especifica a quantidade que um item irá crescer em relação aos outros itens dentro do mesma box, container... Então, se você que um item aumente de tamanho relativamente e com flexibilidade, você usa o flex-grow

Esse link vai ajudar a entender melhor: https://www.w3schools.com/cssref/css3_pr_flex-grow.asp

Esperto ter te ajudado!

No curso o professor usa outra forma para tirar as margens do elemento. Eu gostaria de saber se a forma que estou usando esta correta!? Flex-grow

Porque usar nth-child(4n+1) e não o flex-grow..?

 <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%;
    margin: 1%;
}


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


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

}


.videoSobre .container {
    display: flex;
}

Oi, Braz, tudo bem?

O seu uso está correto sim. Mas a intenção do professor não é aplicar o espaçamento das margens igualmente para todos on links. A intenção é alinhar uma parte com o pseudo elemento nth-child(4n+1) e nth-child(4n)* que irá pegar os links que estão nas extremidades, não todos os links. No caso, ele irá pegar os múltiplos de quatro e os múltiplos de 4 somado a um: 4+1 =5, 8+1 =9... e, por isso, o flex-grow não ajuda muito.