1
resposta

[Dúvida] align-items x justify-content

eu estou na aula montando meu portfólio, e me deparei com essa dúvida... para mim pareceu que as duas tags tem a msm função, porem sei que tem diferenças e usos só que não consegui identificar, não sei pq estou usando as duas na msm class:

.aboutme__main{
padding: 4.7% 20%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 96px;
}

Pois não vejo motivo de manter elas juntas na Tag... pq se apago a "align-items: center;" não muda nada na página e se apago o "justify-content: space-between;" tbm não há mudança! Alguém pode me esclarecer isso?

1 resposta

Oi, Gabriel, tudo bem?

Ótima pergunta! Apesar de parecerem ter funções semelhantes, as propriedades align-items e justify-content têm diferenças importantes.

A propriedade align-items é utilizada para alinhar os itens verticalmente dentro do container. Já a propriedade justify-content é utilizada para alinhar os itens horizontalmente dentro do container.

No seu exemplo, a classe .aboutme__main está utilizando as duas propriedades para centralizar verticalmente o conteúdo e distribuir o espaço horizontalmente entre eles.

Se você remover a propriedade align-items: center;, o conteúdo não será mais centralizado verticalmente. E se você remover a propriedade justify-content: space-between;, o espaço entre os itens não será mais distribuído igualmente.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!