align-items

概要

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.enabledtrue に変更します。複数ラインの flexbox は Firefox 28 からサポートしています。

[2] Internet Explorer 10-11 (Edge は除く) では、align-items: center; を設定した column 方向の flex アイテムで内容物が多い場合に、アイテムがコンテナの境界からはみ出します。詳しくは Flexbug #2 をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz, teoli, ethertank
 最終更新者: yyss,