Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

AS colunas do rodapePrinciapal-navMap ficam grudadas

.rodapePrincipal-navMap-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 260px;
}

Tentei usar justify-content e width e margin, para dar espaço e mesmo assim não tive resultado

3 respostas
solução!

Boa tarde, Eduardo. Poderia postar o HTML da página?

Nas aulas ele procura especificar os valores diretamente nas outras partes... Como as seguintes:

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

E logo depois diretamente, você fez isso? Se fez por favor me mande, posso tentar ajudar ;)

 .rodapePrincipal-navMap-list {

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 250px;
    }

Eu não consegui resolver esse problema com o uso do flex-wrap ou o flex-flow, eu não sei se é possivel fazer o flex-wrap e ainda adicionar espaços entre as quebras de linha. Minha solução proposta é mexer no html e adicionar divs nas listas de cursos dessa forma:

<!-- HTML-->
<section class="rodapePrincipal-navMap">
                <h3 class="subtitulo">Mapa de cursos</h3>
                <nav class="rodapePrincipal-navMap-list">
                    <div class=Row-list>
                        <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">Java</a>
                        <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Python</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>
                    </div>

                    <div class=Row-list>
                        <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
                        <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
                        <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
                    </div>

                    <div class=Row-list>
                        <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
                        <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
                        <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
                        <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Django</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>
                    </div>

                    <div class=Row-list>
                        <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
                        <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
                    </div>

                </nav>
            </section>

Depois adicionar na folha de estios uma margem para separar cada sub-menu:

/* CSS*/

.rodapePrincipal-contatoForm-fieldset{
    display: flex;

}

.rodapePrincipal-navMap-list{
    display: flex;
    height: 300px;
}

.rodapePrincipal-navMap-list .Row-list {
    display: flex;
    flex-direction: column;
    margin-right: 100px;
}