CSS - flex-wrap

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

概要

サポート (説明)

説明

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

使用例

.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; }

<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>

関連項目

リンク

• 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