フレキシブル <div> 要素の全アイテムを中央揃えにします：
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
Try it Yourself ❯
align-items プロパティは、フレキシブルコンテナ内におけるアイテムのデフォルトの配置方法を指定します。
チップ: align-items プロパティをオーバーライドするためには、各アイテムの align-self プロパティを使用します。
| デフォルト値： | stretch |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.alignItems="center" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
数字の後に続く -webkit- は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- |
12.1 |
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
| 値 | 説明 | Play it | |
|---|---|---|---|
| stretch | デフォルト。アイテムはコンテナに合わせて引き伸ばされます | Play it ❯ | |
| center | アイテムはコンテナの中央に配置されます | Play it ❯ | |
| flex-start | アイテムはコンテナの始端に配置されます | Items are positioned at the beginning of the container | Play it ❯ |
| flex-end | アイテムはコンテナの終端に配置されます | Play it ❯ | |
| baseline | アイテムはコンテナのベースラインに配置されます | Play it ❯ | |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ | |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSSリファレンス：align-content プロパティ
CSSリファレンス：align-self プロパティ
HTML DOM リファレンス：alignItems プロパティ