属性名 | flex-flow |
---|---|
値 | <flex-direction> || <flex-wrap> |
初期値 | 個々の属性を参照。 |
適用可能要素 | 個々の属性を参照。 |
継承 | 個々の属性を参照。 |
メディア | 個々の属性を参照。 |
アニメーション | 個々の属性を参照。 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 11 | 20 | 21(-webkit) 29 | 15(-webkit) 17 | 6.1(-webkit) 9 |
flex-direction と flex-wrap をまとめて指定します。フレックスボックスについての概要は flex を参照してください。
値 | 説明 |
---|---|
<flex-direction> | flex-direction の値 |
<flex-wrap> | flex-wrap の値 |
.flexbox { display: flex; display: -ms-flexbox; margin: 10px; padding: 10px; border: 1px solid #999; background-color: #ddd; width: 250px; height: 50px; } .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" style="flex-flow:row nowrap"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h5>row wrap</h5> <div class="flexbox" style="flex-flow:row 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" style="flex-flow:row 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" style="flex-flow:column nowrap"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h5>column wrap</h5> <div class="flexbox" style="flex-flow:column 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" style="flex-flow:column wrap-reverse"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div>