属性名 | order |
---|---|
値 | <integer> |
初期値 | 0 |
適用可能要素 | フレックスアイテム、またはフレックスコンテナ内の絶対位置指定要素 |
継承 | 継承しない |
メディア | visual |
アニメーション | 可能 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 10(-ms-flex-order) 11 | 20 | 21(-webkit) 29 | 15(-webkit) 17 | 6.1(-webkit) 9 |
フレックスアイテムや、フレックスコンテナ内の絶対位置指定(position:absolute)の要素に対して、表示する順序を指定します。指定した数字の小さな方から表示されます。負数を指定することも可能です。フレックスボックスについての概要は flex を参照してください。
.flexbox { display: flex; display: -ms-flexbox; padding: 10px; border: 1px solid #999; background-color: #ddd; } .boxA, .boxB, .boxC { border: 1px solid #999; min-width: 100px; text-align: center; } .boxA { -webkit-flex-order: 3; -ms-flex-order: 3; order: 3; background-color: #fcc; } .boxB { -webkit-flex-order: 1; -ms-flex-order: 1; order: 1; background-color: #cfc; } .boxC { -webkit-flex-order: 2; -ms-flex-order: 2; order: 2; background-color: #ccf; }
<div class="flexbox"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div>