レイアウト
align-self
align-self は、フレックスボックスやグリッドの項目 1 つに書いて、その項目だけ交差軸（横に並べたときは縦）の位置を、箱の align-items と違うものにします。
構文
auto | normal | stretch | <baseline-position>
| <overflow-position>? <self-position> | anchor-centerプレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
}
.box > :nth-child(2) {
align-self: center;
}コントロール
align-selfcenter
safe / unsafe項目が箱からはみ出すときだけ効きます（このプレビューでは、はみ出しません）
1234
解説
値の書き方
auto：初期値です。箱（親）のalign-itemsの値に従います。normal・stretch：高さを決めていない項目を、行の高さいっぱいに伸ばします（フレックスボックスとグリッドでは同じです）。flex-start・flex-end・center：行の上・下・中央に寄せます。項目は中身の高さに縮みます。start・end・self-start・self-end：文字の書き方の向きで上下を決めて寄せます。baseline・last baseline：ほかの baseline の項目と、文字の基準線をそろえます。anchor-center：アンカー位置指定で置いた要素を、アンカーの中央に合わせます。
寄せる値の前に safe を付けると、項目が行より大きいときに上側がはみ出して見えなくならないように start に切り替えます。
項目に書くプロパティ
align-self は箱ではなく、中の項目に書きます。このページのプレビューは、補助の宣言で箱を display: flex にして、2 番目の項目だけに書いています（.box > :nth-child(2)）。ほかの項目は箱の align-items の初期値で縦に伸びたままなので、縁取りした 2 の項目だけが動きます。
横の位置は
グリッドの項目の横の位置は justify-self で決めます。フレックスボックスの項目には justify-self が効かないので、1 つだけ右に寄せたいときは、その項目に margin-left: auto を書きます。