| 属性名 | flex-wrap |
|---|---|
| 値 | nowrap | wrap | wrap-reverse |
| 初期値 | nowrap |
| 適用可能要素 | フレックスコンテナ |
| 継承 | 継承しない |
| メディア | Visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 10(-ms-flex-wrap) 11 | 20 | 21(-webkit) 29 | 15(-webkit) 17 | 6.1(-webkit) 9 |
フレックスアイテムがフレックスコンテナに収まらない場合、はみ出してでも一列に並べて表示するか、複数行(列)に改行して表示するかを制御します。フレキシブルボックスについての概要は flex を参照してください。
| 値 | 説明 |
|---|---|
| nowrap | はみ出しても一列に並べて表示します。IE10 では none として実装されていました。 |
| wrap | 複数行(列)に改行して表示します。 |
| wrap-reverse | 逆方向に改行します。 |
.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; }
<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>
※ フレックスコンテナの横幅を超えても改行しません。
※ 下側に改行します。
※ 上側に改行します。
※ フレックスコンテナの高さを超えても改行しません。
※ 右側に改行します。
※ 左側に改行します。