CSS - flex-wrap

トップ > CSSリファレンス > flex-wrap

概要

属性名 flex-wrap
nowrap | wrap | wrap-reverse
初期値nowrap
適用可能要素フレックスコンテナ
継承継承しない
メディアVisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS310(-ms-flex-wrap)
11
2021(-webkit)
29
15(-webkit)
17
6.1(-webkit)
9

説明

フレックスアイテムがフレックスコンテナに収まらない場合、はみ出してでも一列に並べて表示するか、複数行(列)に改行して表示するかを制御します。フレキシブルボックスについての概要は flex を参照してください。

説明
nowrapはみ出しても一列に並べて表示します。IE10 では none として実装されていました。
wrap複数行(列)に改行して表示します。
wrap-reverse逆方向に改行します。

使用例

CSS
.flexbox {
  display: flex;
  display: -ms-flexbox;
  margin: 10px;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
  width: 250px;
  height: 50px;
}
.flex-row {
  -webkit-flex-direction: row;
          flex-direction: row;
}
.flex-column {
  -webkit-flex-direction: column;
          flex-direction: column;
}
.wrap-nowrap {
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}
.wrap-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.wrap-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
      -ms-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  min-width: 100px;
  min-height: 20px;
  height: 22px;
  text-align: center;
}
.boxA { background-color: #fcc; }
.boxB { background-color: #cfc; }
.boxC { background-color: #ccf; }
HTML
<h5>row nowrap</h5>
<div class="flexbox flex-row wrap-nowrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h5>row wrap</h5>
<div class="flexbox flex-row wrap-wrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h5>row wrap-reverse</h5>
<div class="flexbox flex-row wrap-wrap-reverse">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h5>column nowrap</h5>
<div class="flexbox flex-column wrap-nowrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h5>column wrap</h5>
<div class="flexbox flex-column wrap-wrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h5>column wrap-reverse</h5>
<div class="flexbox flex-column wrap-wrap-reverse">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
表示
row nowrap

※ フレックスコンテナの横幅を超えても改行しません。

A
B
C
row wrap

※ 下側に改行します。

A
B
C
row wrap-reverse

※ 上側に改行します。

A
B
C
column nowrap

※ フレックスコンテナの高さを超えても改行しません。

A
B
C
column wrap

※ 右側に改行します。

A
B
C
column wrap-reverse

※ 左側に改行します。

A
B
C

関連項目

flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content

リンク


Copyright (C) 2015 杜甫々
初版:2015年11月22日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/flex-wrap.htm