Bom dia! Estava analisando meu codigo e ambos comandos surtem a mesma aplicação. Gostaria de saber a diferença entre os dois.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Bom dia! Estava analisando meu codigo e ambos comandos surtem a mesma aplicação. Gostaria de saber a diferença entre os dois.
Oi Eduardo, tudo bem? Agradeço por trazer sua dúvida sobre a diferença entre as propriedades CSS align-items: center e justify-content: center. Ambas têm o objetivo de centralizar elementos, mas são utilizadas em contextos diferentes.
A propriedade align-items é aplicada em contêineres flexíveis para controlar a posição vertical dos elementos filhos. Ela define como os itens são alinhados ao longo do eixo transversal, que é perpendicular à direção do fluxo dos elementos. Por exemplo, se você tiver uma div que contém várias caixas de texto em linha e aplicar align-items: center, as caixas de texto serão alinhadas verticalmente no centro da div.
Vejamos um exemplo de código:
.container {
display: flex;
align-items: center;
}Nesse caso, o align-items: center será aplicado a uma div com a classe "container", que possui o valor display: flex. Isso fará com que todos os elementos filhos dessa div sejam alinhados verticalmente ao centro.
Por outro lado, a propriedade justify-content é utilizada para controlar a posição horizontal dos elementos filhos dentro de um contêiner flexível. Ela define como os itens são alinhados ao longo do eixo principal, que é a direção do fluxo dos elementos. Ao aplicar justify-content: center em um contêiner flexível, os itens serão centralizados horizontalmente.
Veja o exemplo de código a seguir:
.container {
display: flex;
justify-content: center;
}Nesse caso, ao utilizar justify-content: center em uma div com a classe "container", os elementos filhos serão centralizados horizontalmente.
Resumindo, align-items: center é utilizado para alinhar os elementos verticalmente dentro de um contêiner flexível, enquanto justify-content: center é utilizado para alinhar os elementos horizontalmente.
Vale ressaltar que essas propriedades podem ser combinadas em um mesmo contêiner flexível para centralizar os elementos tanto horizontal quanto verticalmente. Por exemplo:
.container {
display: flex;
align-items: center;
justify-content: center;
}Nesse caso, os elementos filhos serão centralizados tanto vertical quanto horizontalmente dentro da div com a classe "container".
Espero que esta explicação tenha sido clara e tenha esclarecido sua dúvida.
Um abraço e bons estudos.