align-items プロパティ
align-items プロパティは、display:flex;において、初期の配置位置を指定するプロパティです。配置位置はデフォルトで交差軸方向（縦方向）の配置です。
display: flex;
align-items: center;
詳しくは Example を参照してください
display:flex;が設定されたエレメントの、特定の子エレメントの配置位置を単独で設定したい場合はalign-selfプロパティを使います。
ページ内 Index
構文(Syntax)
CSS
align-items: stretch | center | flex-start | flex-end | baseline;
DOM ( JavaScript )
object.style.alignItems
object.style.alignItems="_value_"
値（Values）
| Value | 摘要 |
|---|---|
| stretch | 初期値（default値）。 |
| center | 中心に。 |
| flex-start | cross axis（交差軸）のスタート位置。 |
| flex-end | cross axis（交差軸）のエンド位置。 |
| baseline | ベースライン位置。 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
備考（Remarks）
| 初期値（Default value） | stretch |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
align-itemsの例です。center値によって交差軸方向の中心にグリッドアイテム（子エレメント）が揃えられます。グリッドアイテムごとに位置を指定するにはalign-selfプロパティを使います。
関連するプロパティ
display: flex; には以下の関連するプロパティがあります。これらを使って大きさや配置を調整します。
| プロパティ | 概要 |
|---|---|
| flex-basis | フレックスアイテムの基本となる幅 |
| align-content | フレックスラインの垂直方向の配置 |
| align-items | 初期の配置位置 |
| align-self | フレックスアイテムの配置位置 |
| justify-content | 主軸方向での配置を指定 |
| flex-wrap | 横並びにしたフレックスアイテムの折り返し |
| flex-direction | フレックスアイテムの縦または横の並び |
| flex-flow | flex-direction、flex-wrapを一括指定 |
| order | フレックスアイテムの順序を変更 |