Solucionado
Olá! Gostaria de saber se quando eu coloco o elemento na vertical, usando o flex-direction: column; o justify-content poderia ter um efeito nesse seletor? também queria saber um pouco mais das diferença entre eles dois (align-items e justify-content). Pois, estou na dúvida se eu utilizo apenas o align items quando coloco os elementos na vertical, e quando for na horizontal, apenas utilizar o justify-content. Grato! :)
hoje, com a Alura e o Google Gemini
Olá Rian, como vai?
Quando você usa flex-direction: column; para colocar os elementos na vertical, ojustify-contentafeta o alinhamento vertical dos itens dentro do container, enquanto o align-items afeta o alinhamento horizontal.
justify-content: Controla o alinhamento dos itens no eixo principal (no caso de flex-direction: column;, o eixo principal é vertical). Ele define como os itens são distribuídos ao longo desse eixo. Por exemplo, se você usar justify-content: center;, os itens serão centralizados verticalmente no container.
align-items: Controla o alinhamento dos itens no eixo transversal (no caso de flex-direction: column;, o eixo transversal é horizontal). Ele define como os itens são distribuídos ao longo desse eixo. Se você usar align-items: center;, os itens serão centralizados horizontalmente no container.
Então, quando você coloca os elementos na vertical (flex-direction: column;), você normalmente usaria justify-content para controlar o espaçamento vertical entre os itens e align-items para ajustar o alinhamento horizontal se necessário.
Se estiver trabalhando com elementos na horizontal (flex-direction: row;), você geralmente usaria justify-content para controlar o alinhamento horizontal e align-items para ajustar o espaçamento vertical se necessário.
Portanto, para resumir:
justify-content afeta o alinhamento ao longo do eixo principal.
align-items afeta o alinhamento ao longo do eixo transversal.
Espero que isso esclareça suas dúvidas! Se tiver mais perguntas, sinta-se à vontade para perguntar.
Abraços e bons estudos!