概要
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
initialandinheritkeywords 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 に変更することが必要です。
関連情報
- CSS flexible box の利用
- flex 関連 CSS プロパティ:
margin、align-content、align-items、align-self、display、flex、flex-basis、flex-direction、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、min-height、min-width、order