mozilla
Your Search Results

    align-items

    概要

    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,
    サイドバーを隠す