align-items

by 2 contributors:

概要

The CSS align-items プロパティは、カレントの flex ラインの flex アイテムを、justify-content と同様の方法で配置します。ただし、こちらは垂直方向の配置を示します。

  • 初期値 error:(<s*codes+ids*=s*"initial-align-items"[^>]*>)</s*codes+ids*=s*"initial-align-items"[^>
  • 適用対象 flex コンテナ
  • 継承 なし
  • メディア visual
  • 計算値 The keyword as specified in the statement; the initial and inherit keywords are replaced by the real values
  • アニメーションの可否 不可
  • 正規順序the unique non-ambiguous order defined by the formal grammar

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

形式構文: flex-start | flex-end | center | baseline | stretch
align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-items: stretch

align-items: inherit

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 が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。

 

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module 勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 21.0-webkit 18.0 (18.0) (要設定) [1]
20.0 (20.0)
未サポート 12.10 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? 未サポート 12.10 未サポート

[1] Firefox は単一ラインの flexbox のみサポートしています。flexbox サポートを有効にするには、Firefox 18 および 19 ではユーザが about:config の設定 "layout.css.flexbox.enabled" を true に変更することが必要です。

関連情報

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

Contributors to this page: ethertank, yyss
最終更新者: ethertank,
サイドバーを隠す