CSSflex-wrap プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

他のプロパティや詳細情報については CSS フレックスボックスの利用をご覧ください。

構文

flex-wrap: nowrap; /* 既定値 */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* グローバル値 */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

flex-wrap プロパティは次の値のリストから選択した単一のキーワードで指定します。

以下の値を利用することができます。

nowrap
フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 cross-start は、 flex-direction の値に応じて start または before と同一になります。
wrap
フレックスアイテムは複数行に分割されます。 cross-startflex-direction の値に応じて start または before と同一になり、 cross-end は、指定された cross-start の反対側になります。
wrap-reverse
wrap と同様に動作しますが、 cross-startcross-end が入れ替わります。

形式文法

nowrap | wrap | wrap-reverse

HTML

<h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse </h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

CSS

/* Common Styles */
.content,
.content1,
.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

結果

仕様書

仕様書 状態 備考
CSS Flexible Box Layout Module
flex-wrap の定義
勧告候補  

初期値nowrap
適用対象flex containers
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 28IE 部分対応 11
補足
部分対応 11
補足
補足 Partial support due to large number of bugs present. See Flexbugs.
Opera 完全対応 17Safari 完全対応 9WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 12Firefox Android 完全対応 52Opera Android 完全対応 12.1Safari iOS 完全対応 9.2Samsung Internet Android ?

凡例

完全対応  
完全対応
部分対応  
部分対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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