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