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

[Dúvida] 02. Rodapé responsivo - Desafio

Olá boa tarde! Resolvi o desafio mas uma coisa me incomodou:

na atividade a equipe de Design sugere que façamos assim: imagem da equipe de design

Porém se utilizarmos o justify-content: space-between;

Não fica igual a sugestão: Opiniao do instrutor

Na opinião do instrutor sugere que coloquemos 'justify-content', porém apenas o 'Display: flex' já deixa igual ao que a equipe de Design sugere.

Está certo isso?

(Vejo que com Justify há um espaçamento entre as laterais dos itens, o que deixa mais agradável aos olhos, porém só surgiu essa dúvida se era pra deixar exatamente igual ao que a equipe pediu)

2 respostas
solução!

Oi, Júlia, tudo bem?

Ao aplicar display: flex; no container, você está ativando o Flexbox e permitindo que os itens filhos sejam flexíveis. Por padrão, eles tentarão se ajustar dentro do container na direção definida (horizontal, no caso de flex-direction: row; que é o padrão). Se usarmos apenas o display:flex sobrará um espaço ao final do quadro cinza-escuro, após a última imagem e por meio do uso da propriedade justify-content: space-between; esse espaço é redistribuído entre os elementos para ficar proporcional.

Imagem sem o uso do justify-content

Mostrando os elementos em linha com um espaço ao final do último elemento

Imagem com o uso do justify-content

Mostrando os elementos em linha com um espeçamento igual entre todos eles

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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

Entendi, acho que minha tela não havia mostrado a imagem por inteiro por isso não havia compreendido, mas sua explicação ajudou muito a perceber a importância do justfy-content!

Muito Obrigada Rodrigo!

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