| 属性名 | 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>