flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

試してみましょう

flex-flow プロパティは、 flex-directionflex-wrap の両プロパティを一括指定することができ、それぞれフレックスコンテナーの主軸及び交差軸を定義します。

構文

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

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

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

nowrap

フレックスアイテムは単一行に配置され、フレックスコンテナーからはみ出すこともあります。交差軸の先頭は、 flex-direction の値に応じて、インラインの先頭またはブロックの先頭のどちらかと等しくなります。

wrap

フレックスアイテムは複数行に分割されます。交差軸の先頭は、現在の書字方向および flex-direction の値に応じて、インラインの先頭またはブロックの先頭のどちらかと等しくなります。

wrap-reverse

wrap と同様に動作しますが、交差軸の先頭と末尾が入れ替わります。

公式定義

初期値nowrap
適用対象フレックスコンテナー
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

flex-wrap = 
nowrap |
wrap |
wrap-reverse

フレックスコンテナーの wrap 値の設定

HTML

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

css
/* 共通スタイル */
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

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

/* フレックスボックススタイル */
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}

結果

仕様書

Specification
CSS Flexible Box Layout Module Level 1
# flex-wrap-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-wrap
nowrap
wrap
wrap-reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報