概要
CSS align-items プロパティは、カレントの flex ラインの flex アイテムを、justify-content と同様の方法で配置します。ただし、こちらは垂直方向の配置を示します。
| 初期値 | stretch |
|---|---|
| 適用対象 | flex containers |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。
構文
/* cross-start に合わせる */ align-items: flex-start; /* cross-end に合わせる */ align-items: flex-end; /* cross-axis の中央に配置する */ align-items: center; /* アイテムのベースラインに合わせる */ align-items: baseline; /* アイテムを拡張する */ align-items: stretch; /* グローバル値 */ align-items: inherit; align-items: initial; align-items: unset;
値
flex-start- flex アイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。
flex-end- flex アイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。
center- flex アイテムのマージンボックスは、cross-axis 上でライン内の中央に置かれます。アイテムの cross-size が flex コンテナより大きい場合は、両方向へ均等にはみ出します。
baseline- すべての flex アイテムは、ベースラインが一直線になるように配置されます。cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。
stretch- アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。
形式構文
flex-start | flex-end | center | baseline | stretch
仕様書
| 仕様書 | 状況 | 備考 |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'align-items' in that specification. |
Last Call Working Draft | 最初の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 21.0-webkit | 20.0 (20.0)[1] | 11.0 [2] | 12.10 | 7.0-webkit |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 4.4 | ? | 20.0 (20.0)[1] | 未サポート | 12.10 | 7.0-webkit |
[1] Firefox 18 および 19 で flexbox のサポートを有効にするには、about:config の設定 layout.css.flexbox.enabled を true に変更します。複数ラインの flexbox は Firefox 28 からサポートしています。
[2] Internet Explorer 10-11 (Edge は除く) では、align-items: center; を設定した column 方向の flex アイテムで内容物が多い場合に、アイテムがコンテナの境界からはみ出します。詳しくは Flexbug #2 をご覧ください。