CSS の align-items
プロパティは、すべての直接の子要素に集合として align-self
の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。
以下のデモは、グリッドレイアウトを使用して align-items
のいくつかの値の動作を示しています。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* 基本キーワード */ align-items: normal; align-items: stretch; /* 位置による配置 */ /* align-items は左と右の値を取らない */ align-items: center; /* アイテムを中央付近にまとめる */ align-items: start; /* アイテムを先頭にまとめる */ align-items: end; /* アイテムを末尾にまとめる */ align-items: flex-start; /* フレックスアイテムを先頭にまとめる */ align-items: flex-end; /* フレックスアイテムを末尾にまとめる */ /* ベースラインに配置する */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */ align-items: safe center; align-items: unsafe center; /* グローバル値 */ align-items: inherit; align-items: initial; align-items: unset;
値
normal
- キーワードの効果は現在のレイアウトモードに依存します。
- 絶対配置のレイアウトでは、このキーワードは置換絶対配置ボックスにおける
start
のように動作し、他のすべての絶対配置ボックスではstretch
として動作します。 - 絶対配置レイアウトの静的位置では、キーワードは
stretch
として動作します。 - フレックスアイテムについては、このキーワードは
stretch
として動作します。 - グリッドアイテムについては、このキーワードは
stretch
の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合はstart
のように動作します。 - このプロパティはブロックレベルボックスや、表のセルには適用されません。
- 絶対配置のレイアウトでは、このキーワードは置換絶対配置ボックスにおける
flex-start
- フレックスアイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。
flex-end
- フレックスアイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。
center
- フレックスアイテムのマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。
start
- そのアイテムは、互いにその軸の配置コンテナーの始点側の端に寄せられます。
end
- そのアイテムは、互いにその軸の配置コンテナーの終点側の端に寄せられます。
self-start
- そのアイテムは、その軸の配置コンテナーで、そのアイテムの始点側の端に寄せられます。
self-end
- そのアイテムは、その軸の配置コンテナーで、そのアイテムの終点側の端に寄せられます。
baseline
first baseline
last baseline
- すべてのフレックスアイテムは、ベースラインが一直線になるように配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。
stretch
- アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。
safe
- 配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが
start
であったかのように配置されます。 unsafe
- 配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
形式文法
normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
例
CSS
#container { height:200px; width: 240px; align-items: center; /* Can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; }
HTML
<div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-items: </label> <select id="values"> <option value="normal">normal</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center" selected>center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> <option value="start">start</option> <option value="end">end</option> <option value="self-start">self-start</option> <option value="self-end">self-end</option> <option value="left">left</option> <option value="right">right</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="safe center">safe center</option> <option value="unsafe center">unsafe center</option> <option value="safe right">safe right</option> <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe self-end">safe self-end</option> <option value="unsafe self-end">unsafe self-end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div>
JavaScript
var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); values.addEventListener('change', function (evt) { container.style.alignItems = evt.target.value; }); display.addEventListener('change', function (evt) { container.className = evt.target.value; });
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Box Alignment Module Level 3 align-items の定義 |
草案 | 最新の構文定義に更新。 |
CSS Flexible Box Layout Module align-items の定義 |
勧告候補 | 初回定義 |
初期値 | normal |
---|---|
適用対象 | すべての要素 |
継承 | なし |
メディア | 視覚 |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Supported in Flex Layout | Chrome
完全対応
52
| Edge
完全対応
12
| Firefox
完全対応
20
| IE
完全対応
11
| Opera 完全対応 12.1 | Safari
完全対応
9
| WebView Android
完全対応
52
| Chrome Android
完全対応
52
| Firefox Android
完全対応
20
| Opera Android 完全対応 12.1 | Safari iOS
完全対応
9
| Samsung Internet Android
完全対応
6.0
|
first baseline and last baseline | Chrome 完全対応 59 | Edge 未対応 なし | Firefox 完全対応 45 | IE 未対応 なし | Opera 完全対応 46 | Safari 完全対応 11 | WebView Android 完全対応 59 | Chrome Android 完全対応 59 | Firefox Android 完全対応 45 | Opera Android 完全対応 43 | Safari iOS 完全対応 11 | Samsung Internet Android 完全対応 あり |
left and right | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 45 | IE 未対応 なし | Opera 未対応 なし | Safari 完全対応 9 | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 45 | Opera Android 未対応 なし | Safari iOS 完全対応 9 | Samsung Internet Android 未対応 なし |
safe and unsafe | Chrome
未対応
なし
| Edge 未対応 なし | Firefox 完全対応 63 | IE 未対応 なし | Opera
未対応
なし
| Safari
未対応
なし
| WebView Android
未対応
なし
| Chrome Android
未対応
なし
| Firefox Android 完全対応 63 | Opera Android
未対応
なし
| Safari iOS
未対応
なし
| Samsung Internet Android
未対応
なし
|
start and end | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 45 | IE 未対応 なし | Opera 完全対応 44 | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 45 | Opera Android 完全対応 43 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
グリッドレイアウトでの対応
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Supported in Grid Layout | Chrome 完全対応 57 | Edge 完全対応 16 | Firefox 完全対応 52 | IE 未対応 なし | Opera 完全対応 44 | Safari 完全対応 10.1 | WebView Android 完全対応 57 | Chrome Android 完全対応 52 | Firefox Android 完全対応 52 | Opera Android 完全対応 43 | Safari iOS 完全対応 10.3 | Samsung Internet Android 完全対応 6.2 |
start and end | Chrome 完全対応 57 | Edge 未対応 なし | Firefox 完全対応 52 | IE 未対応 なし | Opera 完全対応 44 | Safari 完全対応 11 | WebView Android 完全対応 57 | Chrome Android 完全対応 57 | Firefox Android 完全対応 52 | Opera Android 完全対応 43 | Safari iOS 完全対応 11 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスコンテナーにおけるアイテムの配置
- CSS グリッドガイド: CSS グリッドレイアウトにおけるボックスの配置
- CSS ボックス配置
align-self
プロパティ