CSS - flex-wrap
概要
属性名 | 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 | 逆方向に改行します。 |
使用例
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
<h3>row nowrap</h3> <div class="flexbox flex-row wrap-nowrap"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h3>row wrap</h3> <div class="flexbox flex-row wrap-wrap"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h3>row wrap-reverse</h3> <div class="flexbox flex-row wrap-wrap-reverse"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h3>column nowrap</h3> <div class="flexbox flex-column wrap-nowrap"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h3>column wrap</h3> <div class="flexbox flex-column wrap-wrap"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h3>column wrap-reverse</h3> <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リンク
- http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property
- https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap
- http://caniuse.com/#feat=flexbox
Copyright (C) 2015 杜甫々
初版:2015年11月22日、最終更新:2015年11月22日
https://www.tohoho-web.com/css/prop/flex-wrap.htm