Por que usaste el align-self?, si se supone que para organizar elementos verticalmente con flex se usa el justify-conten ?

Los compañeros ya te respondieron, pero si no terminas de entender como funciona lo de flex, te recomiendo este juego en linea que te ayuda a entender estos conceptos:

Flexbox Froggy

Exacto, si el flex-direction tiene un valor de column o column-reverse para alinear horizontalmente se usaría align-items y verticalmente justify-content, y cuando flex-direction esta en row o row-reverse para alinear horizontalmente se usaría justify-content y verticalmente align-items

El align-self se usa para alinear a ese mismo componente al que le estás aplicando esa propiedad. Normalmente es para hacerlo de forma vertical, pero si cambias las dirección del flex a column, esto se hará de forma horizontal.

¡Hola! Depende de la dirección del display flex, si es row (como por defecto) con align corriges verticalmente, si es column corriges horizontalmente.

La propiedad align se utiliza para la alineación perpendicular al eje principal.

Normalmente al declarar ++display:flex++ ++por default++ el eje principal es el ++horizontal++, pero la propiedad ++flex-direction:column++ cambio el eje principal, ahora el eje principal es el vertical y por lo tanto align ahora funciona para alinear horizontalmente.