備忘録的プログラミングリファレンス

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 AnimationYes

Example

 order プロパティの例です。 <div id="over">が親エレメントに、grid-template-rows プロパティで上から高さ100px、200px、autoで指定しています。 コンテンツ4、5は指定していません。

 コンテンツ1、2、3の順番が order プロパティで変更してあります。順番を指定していないコンテンツ4、5が先になって、高さは上から順に設定されるようです。