CSS align-items 属性

定義と使用方法

align-items 属性を使用して、フレックスコンテナ内のアイテムのデフォルトのアライメントを指定します。

ヒント：各アイテムの align-self この align-items 属性を覆す属性を指定してください。

も参照してください：

CSS タイプ：CSS グリッド

CSS タイプ：CSS Flexbox

CSS リファレンスマニュアル：align-content 属性

CSS リファレンスマニュアル：align-self 属性

CSS リファレンスマニュアル：justify-content 属性

CSS リファレンスマニュアル：justify-items 属性

CSS リファレンスマニュアル：justify-self 属性

HTML DOM リファレンスマニュアル：alignItems 属性

例

フレックス <div> 要素のすべてのアイテムを中央に配置する：

div {
  display: flex;
  align-items: center;
}

実際に試してみてください

CSS 文法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性値

値 説明
stretch デフォルト。アイテムはコンテナに合わせて伸ばされます。
center アイテムはコンテナの中央に位置付けられます。
flex-start アイテムはコンテナの先頭に位置付けられます。
flex-end アイテムはコンテナの末端に位置付けられます。
ベースライン アイテムはコンテナのベースラインに位置付けられます。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性は親要素から継承されます。参照してください： inherit。

技術的な詳細

デフォルト値： stretch
継承： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーションに関連する属性。
バージョン： CSS3
JavaScript 文法： object.style.alignItems="center"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0