align-itemsはflexboxまたは、gridレイアウトを使用している時に、
並べている方向と垂直に交わる軸方向の配置を調整するプロパティです💡

align-itemsの基本

flexコンテナ（display:flex;を適用している要素）
または、gridコンテナ（display:grid;を適用している要素）に対して適用します。

配置したい要素自体に設定しても適用されないので要注意🙋‍♀️

flexboxで高さの違う3つのボックスを、縦方向中央揃えにしたい場合を例にかいてみます。👇

<div class="flex"> <!-- ←この要素にalign-itemsを適用する！ -->
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>

.flex{
  display:flex;
  align-items:center;
}
.box{
  background:gold;
  flex:1;
  margin-right:1rem;
}
.box1{
  height:3em;
}
.box2{
  height:7em;
}
.box3{
  height:11em;
}

👉 flexboxの基本についてはこちら

.flexの方にalign-items:center;を適用して、
.boxの方には指定しません。
もし、.boxの方に指定しても、.boxは縦方向中央揃えにはなりません😵

align-itemsは、中の要素を中央揃えにするプロパティだって認識しておくと良いです🙆‍♀️

DEMO

じゃあ、例えば、、コンテナの中の全てではなく、1つだけを中央揃えにしたいような場合には、align-selfプロパティを使います👌

align-selfで要素自体の配置を設定する

align-selfは、align-itemsとは逆に、配置したい要素自体に適用します💡
1つのボックスだけ縦方向の配置を変えたい場合や、全部の縦方向の配置をバラバラにしたい場合に使います。

さっきと同じHTMLで、1のボックスを縦方向中央に配置、
2のボックスを縦方向の下揃えに配置してみます👇

<div class="flex">
  <div class="box box1">1</div> <!-- ←この要素にalign-selfを適用する！ -->
  <div class="box box2">2</div> <!-- ←この要素にalign-selfを適用する！ -->
  <div class="box box3">3</div>
</div>

.flex{
  display:flex;
}
.box{
  background:gold;
  flex:1;
  margin-right:1rem;
}
.box1{
  height:3em;
  align-self:center;
}
.box2{
  height:7em;
  align-self:end;
}
.box3{
  height:11em;
}

DEMO

下で揃えるけど、bottomとは書かないところがポイントです😇
上か下かということではなく、先頭か終わりかという考え方です。

なんとヤヤコシイ・・・

横に並べている要素の上側で揃えたい場合にはalign-self:start;
下側で揃えたい場合にはalign-self:end;
のように指定します💡

さらに親要素に、align-itemsが適用されていている場合は、align-selfの方が適用されます🙆‍♀️

特にflexboxで一番間違いがちなのは、どこにプロパティを適用するかというところです。
align-itemsやalign-selfのように、適用する場所を間違えると全然効かない😭
というプロパティも多いので、プロパティの概要をしっかり確認しておくと良いです🙋‍♀️