order プロパティ
order プロパティは、display:flex; や display:grid; といった Flexbox によるエレメント（コンテナ）内で表示されるアイテムの順序を変更するプロパティです。
display:flex; はフレックスコンテナー、 display:grid; はグリッドコンテナーと呼ばれます。
order プロパティは、コンテナ内の子エレメント（アイテム）に指定します。
.flex_container{
display: flex;
}
.flex_item01 {
order: 2;
}.flex_item02 {
order: 3;
}
.flex_item03 {
order: 1;
}
詳しくは Example を参照してください
親エレメントに display:flex; または display:grid; を指定します。
そして、その子エレメントごとに order プロパティで順番を指定します。
ページ内 Index
構文(Syntax)
CSS
order: number | initial | inherit;
DOM ( JavaScript )
String = object.style.order;
object.style.order="number | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| 0 | 初期値（default値） |
| number | 整数値 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | 0 |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
order プロパティの例です。 <div id="over">が親エレメントに、grid-template-rows プロパティで上から高さ100px、200px、autoで指定しています。 コンテンツ4、5は指定していません。
コンテンツ１、２、３の順番が order プロパティで変更してあります。順番を指定していないコンテンツ４、５が先になって、高さは上から順に設定されるようです。
関連するプロパティ
display: flex; には以下の関連するプロパティがあります。これらを使って大きさや配置を調整します。
| プロパティ | 概要 |
|---|---|
| flex-basis | フレックスアイテムの基本となる幅 |
| align-content | フレックスラインの垂直方向の配置 |
| align-items | 初期の配置位置 |
| align-self | フレックスアイテムの配置位置 |
| justify-content | 主軸方向での配置を指定 |
| flex-wrap | 横並びにしたフレックスアイテムの折り返し |
| flex-direction | フレックスアイテムの縦または横の並び |
| flex-flow | flex-direction、flex-wrapを一括指定 |
| order | フレックスアイテムの順序を変更 |