O professor utilizou o seguinte código:
.destaques {
display: flex;
align-items: center
column-gap: 10px
}
.destaques__barra {
flex-grow: 1;
antes dele passar esse código eu tentei fazer do meu jeito e ficou assim:
.destaques {
display: flex;
align-items: center;
justify-content: space-between;
}
não seria melhor utilizar o jeito que eu fiz nesse caso, tendo em vista que eu diminui algumas linhas do código e teve o mesmo resultado?
hoje, com a Alura e o Google Gemini
Olá, Nathan!
Agradeço por compartilhar sua dúvida conosco. Vamos analisar a situação.
Na sua tentativa de usar justify-content: space-between na classe .destaques, você está tentando criar um espaçamento igual entre os elementos, fazendo com que eles sejam distribuídos ao longo do eixo principal do flex container.
No entanto, o código fornecido pelo professor utiliza align-items: center para centralizar os elementos verticalmente, e column-gap: 10px para criar um espaçamento de 10 pixels entre as colunas.
Se você utilizar justify-content: space-between no lugar de align-items: center, os elementos serão distribuídos igualmente ao longo do eixo horizontal, o que pode não ser o resultado desejado.
Por exemplo, se você tiver apenas dois elementos dentro do .destaques, eles serão posicionados nos extremos da linha, sem espaçamento entre eles. Mas se tiver três ou mais elementos, eles serão distribuídos igualmente ao longo da linha.
Portanto, a escolha entre justify-content: space-between e align-items: center depende do resultado visual que você deseja alcançar, e levando em conta sae vai ter mais ou menos elementos.
Espero ter ajudado e bons estudos!