3
respostas

[Dúvida] meu justify-content: space-between não funciona de jeito nenhum

Boa noite!

Na parte onde colocamos just-content: space-between na classe .apresentacao, simplesmente não resulta em nada aqui. Já verifiquei o código e aparentemente está igual ao do curso. Poderiam me auxiliar por favor? Segue código abaixo:

*{ margin: 0; padding: 0; }

body{ height: 100vh; box-sizing: border-box; background-color: black; color: #F6F6F6; }

.titulo-destaque{ color: #22D4FD; }

.apresentacao { margin: 10%; display: flex; align-items: center; justify-content: space-between;

}

.apresentacao__conteudo { width: 615px; }

.apresentacao__conteudo__titulo { font-size: 36px; }

.apresentacao__conteudo__texto { font-size: 24px; }

3 respostas

Você já deu uma olhada se no código HTML tem alguma divergencia na classe? Tava com um problema similar que no meu código HTML a classe continha acento e no arquivo CSS não

Se o seu código estiver desse jeito, então vai ficar centralizado, porém não ficará em colunas, pois nesse caso o display:flex; está sendo aplicado no div com a classe="apresentacao__conteudo" Imagem que representa o código informado pelo usuario O justify-content atua nos itens filhos do elemento pai. No exemplo acima, o div com a classe="apresentacao" tem apenas um filho (que é o apresentacao__conteudo), logo aplicará apenas nele. Porém se tivesse, por exemplo, outro elemento: imagem com uma possivel correçãoDesse jeito o justify-content seria aplicado. Porém é bom dar uma olhada se o nome dos arquivos/classes estão corretos, além de verificar se tá importando certinho o css.

Outra coisa que pode acontecer também, é quando o elemento pai não tem width suficiente para empurrar os itens. Eu costumo colocar uma borda, para ter uma noção de quanto de espaço tem disponivel.

Defina uma altura para o elemento com a classe apresentacao, pois vai precisar, para o align-items funcionar. E coloque tambem uma largura e faca o teste.

se não funcionar, pode ser alguma coisa escrita errado