Entrar Ainda não tem acesso?
3
respostas

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

Referente ao curso Flexbox: posicione elementos na tela

por Henrique Iamarino
| 50.7k xp | 3 posts
Visual Designer

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
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.

por Henrique Iamarino
| 50.7k xp | 3 posts
Visual Designer

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;
}
...
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.