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

Colunas do rodapePrinciapal-navMap ficam grudadas

Fala galera, blz?

Dei uma olhada nas discusões aqui do forum e percebi que tem alguns post relacionados a mesma dúvida que tenho:

  • Colunas do rodapePrinciapal-navMap ficam grudadas.

Como não achei nenhuma resposta que, realmente, resolveu esse problema, decidi postar o que eu fiz para dar espaçamento entre as colunas. Segue meu código css:

.cabecalhoPrincipal .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav{
    display: flex;
}


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

}


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

.rodapePrincipal-patrocinadores-list{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 70%;
}

.rodapePrincipal-contatoForm{
    width: 25%;
}

.rodapePrincipal-contatoForm-fieldset{
    display: flex;
}

Eu coloquei um, "número mágico", width:470% e consegui aplicar um espaçamento. O problema é que esse valor é um numero qualquer. Se alguém souber um método mais fácio e lógico, usando as propriedades do flex box, por favor, comentem aqui, gostaria de aprender também.

4 respostas

Fala Victor, tudo bem?

Você poderia tentar utilizar o margin ou padding nos filhos para dar o espaçamento entre eles, mas para te auxiliar melhor, poderia enviar o código html e css por completo para eu dar uma olhada?

Aguardo o seu retorno :D

Fala Mateus...blz e vc mano?

Cara....Descobri onde estava o erro!

Como vc falou, eu precisava colocar um padding-right no filho, que nesse caso seria o navmap-list-title.

O probleama foi que no meu html tinha 2 CSS, o css que veio com os arquivos de aula e o CSS que eu criei para acompanhar a aula.

No css que veio com os arquivos da aula, estava faltando o padding-right.

O que eu fiz foi add o padding-right no css que eu criei.

Esse é o css que veio com os arquivos da aula: style.css

.navmap-list-title {
    font-weight: 700;
    font-size: 1.3em;
    margin: .9em 0;
    padding-left: .3em;
    padding-top: .2em;
    padding-bottom: .2em;
}

Esse é css que criei para acompanhar a aula:

.navmap-list-title {
    padding-right: 5em;
}

Agora faz mais sentido! Brigadão pela ajuda Mateus!

solução!

Fico feliz em te ajudar! Caso tenha resolvido marque como solução para que outros alunos possam encontrar a resposta mais facilmente :D

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