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

orderプロパティ

 orderプロパティは、display:flex;display:grid;によるエレメント(コンテナ)内で表示される順序を変更するプロパティです。

 orderプロパティは、コンテナ内の子エレメント(アイテム)に指定します。

アイテムの順序を替える
.flex_container{
	display: flex;
}
.flex_item01 {
	order: 2;
}.flex_item02 {
	order: 3;
}
.flex_item03 {
	order: 1;
}

構文(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が先になって、高さは上から順に設定されるようです。