3
respostas

Mapa de cursos com as colunas coladas (também com esse problema)

Após rearranjar a coluna original nas 4 correspondentes as 4 categorias de cursos, diferente de como ficou no vídeo da aula, as 4 colunas ficaram com larguras diferentes e sem espaço entre os títulos delas (categorias, como Linguagens Backend, Linguagens Frontend..)...

...tentado o que o instrutor recomendou do outro post com o mesmo nome, de inserir um justify-content, como o colega que perguntou naquele post já respondeu, só faz com que os cursos recebam espaços entre eles (na vertical), sendo que as colunas produzidas pela aplicação do flex-wrap: wrap é que estão sem espaços entre elas (lateralmente /horizontal)...

...e nem tentei o margim-bottom pois não deve funcionar também, pois até talvez pudesse funcionar, se fosse um margim-left ou rigth, mas nesse caso deveria ser num seletor novo, para um dos filhos, correto?

PS: no outro post há uma imagem do erro que é igual ao que vejo no meu

Abraços,

3 respostas

Fala aí La, tudo bem? Poderia postar os códigos? tanto HTML quando CSS, dessa maneira fica mais fácil simular e entender o problema.

Fico no aguardo.

Oi, Matheus!

É da aula 3 do curso "FlexBox: Posicione elementos na tela", da parte 3 (Front-end UI Avançado) do Passo a Passo (guia de estudos) da formação Engenheiro Front-end.

Estou usando Windows 10, Chrome e renomeei a pasta do projeto (que era pra baixar no início do curso) de "Flexbox", apenas, e estou abrindo ela, a pasta inteira, no Atom.

HTML (arquivo index.html):

...

    <section class="rodapePrincipal-navMap">
        <h3 class="subtitulo">Mapa de cursos</h3>
        <nav class="rodapePrincipal-navMap-list">...```

CSS (arquivo flexbox.css):

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

O que você pode fazer é nos filhos de nav você colocar um calc no width:

width: calc(25% - 1rem);

Nesse exemplo seria para quatro filhos (100% / 4 = 25%) e adicionar o espaçamento de 1rem.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software