Gostaria de esclarecer minha dificuldade com o alinhamento do meu projeto do #7daysofcode com html e css, projeto linkedin. Estou tentando alinhas as logos do meu header, sendo assim apliquei o align-items: flex-end, para alinharem na base e mesmo assim as logos ficam desalinhadas.
Além deste alinhamento, gostaria de aplicar um espaçamento usando o justify-content: space-between;, mas não aplica nenhum resultado após isso, permanece o mesmo espaçamento e não sei o motivo.
Olá Felipe, tudo bem?
Pelo que pude observar no link disponibilizado, os itens já estão bem alinhados e você conseguiu resolver o problema com o justify-content: space-between;, mas para lhe ajudar eu fiz alguns testes e obtive um bom resultado, que pode auxiliar um pouco com a responsividade do cabeçalho.
Aqui está o código CSS:
.logo{
display: flex;
flex-direction: column;
align-items: center;
}
.logo > img {
margin: 0.3rem auto;
}
Se não entender algo feito acima, é só perguntar que eu explico.
Isso deve ajudar um pouco, mas deve ter um ícone ou outro que não vai ficar tão alinhado assim, mas isso é por conta do próprio tamanho do ícone, como, por exemplo, o ícone de "Mensagens" que pode ficar mais alinhado para cima, ou o de "Minha rede" que pode ficar mais abaixo, mas no geral isso está se dando pelo próprio tamanho das imagens que você colocou ali, então para resolver isso 100% você teria que estar editando o próprio tamanho em pixel das imagens. E como elas estão em PNG, acho que isso é possível em algum editor de imagem ou photoshop.
Mas em um contexto geral era isso que eu tinha para mencionar.
Se precisar de algo eu estarei por aqui.
Abraços e bons estudos.
Fala Renan, muito obrigado por me ajudar cara, então busquei aplicar seu código CSS, porém não tive exito. Deixei aplicado no projeto para caso consiga verificar e puder ver o que fiz de errado. Também alterei meu código assim que apliquei o seu, pra testar em outros cenários, mas também não consegui. https://felipeoliveeira.github.io/html-css/LinkedIn/index.html