align-items

値の書き方

• normal：初期値です。フレックスボックスでは stretch と同じです。
• stretch：高さが auto の項目を、行の高さいっぱいに伸ばします。高さを決めた項目は伸びません。
• flex-start・flex-end：交差軸の始まり・終わりの端（横に並べたときは上・下）に寄せます。flex-wrap: wrap-reverse では入れ替わります。
• center：真ん中に寄せます。
• baseline（first baseline）：項目の最初の行のベースラインをそろえます。大きさの違う文字を並べるときに便利です。
• last baseline：最後の行のベースラインでそろえます。
• start・end：文字の向きで決まる端に寄せます。wrap-reverse でも入れ替わりません。
• self-start・self-end：項目自身の文字の向きで決まる端に寄せます。
• anchor-center：アンカー位置指定（position-anchor）で置いた要素を、アンカーの真ん中にそろえます。ほかの項目には効かないので、このプレビューでは変わりません。

このページのプレビューは、補助の宣言で display: flex にしています。項目は最小の高さだけ決めているので、stretch では行の高さいっぱいに伸び、flex-start などでは高さの違いが見えます。項目の中の数字は上下の真ん中に置いているので、baseline では数字の高さがそろいます。

1 つの項目だけそろえ方を変えたいときは、その項目に align-self を書きます。

safe と unsafe

位置のキーワードの前に safe を付けると、項目が行からはみ出すときは start に寄せて、はみ出した分が見えない側（上）に隠れないようにします。unsafe は、はみ出しても指定どおりの位置に置きます。どちらも付けないときは、今のブラウザでは unsafe と同じ動きです。このページのプレビューでは項目がはみ出さないので、付けても見た目は変わりません。