Disculpen, por qué utiliza align-self para alinear el div de forma horizontal??. Según lo que leí, el align sirve para alinear de forma v...

basicamente por que el contenedor padre, que es el que tiene le display: flex; tambien tiene la propiedad de flex-direction: column;, lo que invierte los valores, es decir. Flex-direction viene por defecto en row Pero si tienes flex-direction: column; se invierte y ahora align-self sirve en horizontal en vez de vertical por que ahora no estas tratando con una linea sino con una columna, te dejo un enlace de documentacion para que puedas leerlo mejor sobre el flex-direction :D https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Hola, en realidad se trabaja por ejes, seguramente en el caso que describes se ha cambiado el eje antes, el eje viene por defecto de manera horizontal, pero cuando se usa

flex-direction: column;

el eje principal ahora es el vertical y por eso se alineo de esa forma, no solo funciona con el align-items, tambien con otras propiedades como justify-content: flex-start; o justify-content:flex-end, puedes practicar flex-box en el siguiente enlace https://flexboxfroggy.com/#es espero te ayude a comprender mejor como funciona flexbox