mozilla
Your Search Results

    flex-wrap

    概要

    CSS flex-wrap プロパティは、子アイテムを単一ラインに押し込むか、あるいは複数ラインに流し込めるようにしてもよいかを指定します。

    • 初期値 error:(<s*codes+ids*=s*"initial-flex-wrap"[^>]*>)</s*codes+ids*=s*"initial-flex-wrap"[^>
    • 適用対象 flex コンテナ
    • 継承 なし
    • メディア visual
    • 計算値 指定値

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

    構文

    形式構文: nowrap | wrap | wrap-reverse
    
    flex-wrap: nowrap
    flex-wrap: wrap
    flex-wrap: wrap-reverse
    
    flex-wrap: inherit
    

    以下の値を指定できます:

    nowrap
    flex アイテムは単一ラインにレイアウトされ、flex コンテナからあふれ出す場合もあります。cross-start の位置は、flex-direction の値に応じて start または before と同一になります。
    wrap
    flex アイテムは複数ラインに分けられます。cross-start の位置は flex-direction の値の値に応じて start または before と同一になります。また cross-end は、特定された cross-start の反対側になります。
    wrap-reverse
    wrap と同様ですが、cross-startcross-end の位置が入れ替わります。

    element {
      flex-wrap: nowrap;
    }
    

    仕様書

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

    ブラウザ実装状況

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

    [1] Firefox は単一ラインの flexbox のみサポートしています。

    関連情報

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

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