Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Quebrar a coluna por tamanho de height em pixels parece não ser uma boa ideia

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Fazendo o footer e controlando melhor os elementos e atividade Arrumando o course map

por Maurício Martins da Silva
| 341.6k xp | 80 posts

Nessa aula, o instrutor utilizou o seguinte código para organizar o mapa de cursos:

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

A definição de height em 250px parece não ser uma boa idéia, pois no meu browser, jogou o último item do primeiro h4 na segunda coluna, em cima do segundo h4. Para "corrigir" isso, tive que mudar o height para 255px. Entretanto, imagino que a adição desses 5 pixels pode fazer com que em outros browsers, aconteça o contrário, o 2º h4 pode "caber" na primeira coluna, desorganizando a lista novamente.

Fazer a medida em "em" parece ser uma ideia melhor, porém teria que mudar essa altura sempre que aumentasse a lista de cursos.

Não seria uma ideia melhor envolver as quatro listas de cursos em 4 divs e aí faço um flex-direction: row nas 4 divs, e dentro das divs, individualmente eu faço 4 flex-direction: column?

2 respostas
por Instrutor
| 1132.1k xp | 1471 posts
Instrutor

Maurício, boa tarde!

Foi uma ótima observação, existem vária s formas de alcançar o objetivo final, sinta-se livre para usar aquele que mais se enquadre nas suas necessidades.

Quando terminar compartilha com a gente e marca como solucionada para poder ajudar mais alunos!

Bons estudos!

solução!
por Maurício Martins da Silva
| 341.6k xp | 80 posts

A solução sem determinar o height seria essa no html:

<nav class="rodapePrincipal-navMap-list">
    <div class="listaCursos">
        <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="listaCursos">
        <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="listaCursos">
        <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="listaCursos">
        <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>

E essa no css:

.rodapePrincipal-navMap-list{
  display: flex;
  justify-content: space-between;
}

.listaCursos{
  display: flex;
  flex-direction: column;
}