Como puedo darme cuenta cuando usar align-items: center; o justify-content: center, siempre tengo esa duda al centrar mi elementos asi que normalmente pruebo uno de los dos, Gracias :)
Como puedo darme cuenta cuando usar align-items: center; o justify-content: center, siempre tengo esa duda al centrar mi elementos asi que normalmente pruebo uno de los dos, Gracias :)
¡Hola Delmiza!
Entiendo tu confusión al momento de decidir entre align-items: center;
y justify-content: center;
al centrar elementos. La diferencia principal entre estas dos propiedades es que align-items
se aplica al eje transversal (eje Y si estás utilizando flexbox) y justify-content
se aplica al eje principal (eje X si estás utilizando flexbox).
Por ejemplo, si estás trabajando con un contenedor flex y quieres centrar los elementos verticalmente, deberías usar align-items: center;
. Por otro lado, si deseas centrar los elementos horizontalmente dentro de un contenedor flex, deberías usar justify-content: center;
.
Espero que esta explicación te ayude a comprender cuándo utilizar cada propiedad. Si tienes más preguntas, no dudes en preguntar.
También te comparto una página que un alumno compartió para practicar con flex https://flexboxfroggy.com/#es .
Espero haber ayudado y buenos estudios!