me podrian recordar la diferencia de in align-self o un align-item?

Hola! Para agregar al gran aporte de @ccolin, no existe align-item, es

(items es plural), ahí creo que está la confusión. :DD

Cuando a un elemento padre le asignas un display flex, puedes asignarle, también, cómo irán alineados los elementos hijos; utilizando align-items, por ejemplo. Sin embargo, dentro de los elementos hijos puede que haya un elemento que tenga una alineación diferente a la declarada por el elemento padre. Esto lo logras con align-self. align-self sobreescribirá la alineación del elemento hijo que le haya dado el elemento padre. Mira este ejemplo.

HTML:

<div class="container">
  <div class="flex-item"></div>
  <div class="flex-item center"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

CSS:

.container {
  height: 300px;
  background-color: #000;
  display: flex;
  align-items: flex-start;
}
.flex-item {
  background-color: #faa;
  width: 50px;
  height: 50px;
  margin: 20px;
}
.center {
  align-self: center;
}

Resultado: https://codepen.io/tastyycode/pen/VwzXexX