| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {order: 値 } |
| 値 の形式 | 数値（整数） |
| 初 期 値 | 0 |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | フレキシブルボックス内の子要素 |
| 継 承 | しない |
orderプロパティ は，ボックス内の子要素の表示順を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| 数値（整数） |
|
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
.wrapp {
width: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.wrapp div{
font-size: 20px;
color: white;
width: 250px;
padding: 20px 0px;
margin: 5px;
text-align: center;
background-color: #6c6c6c;
}
div.num1 { order: 3; }
div.num2 { order: 2; }
div.num3 { order: 4; }
div.num4 { order: 1; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="num1">div.num1 { order: 3; }</div> <div class="num2">div.num2 { order: 2; }</div> <div class="num3">div.num3 { order: 4; }</div> <div class="num4">div.num4 { order: 1; }</div> |
| ブラウザー 表示例 |
|---|
div.num1 { order: 3; }
div.num2 { order: 2; }
div.num3 { order: 4; }
div.num4 { order: 1; }
|
orderプロパティ は，フレックスボックス内での順番を指定するものなので，親のフレキシブルボックスの displayプロパティ の値を flex に設定する必要があります。