【CSS】Flexコンテナ内のFlexアイテムの表示順を指定する「order」プロパティ

order プロパティは、flexコンテナ内で flex アイテムを、記載された順番を無視して、レイアウトに使用する順序を指定します。要素はorder の値の昇順に配置されます。

order の値が指定されていた場合は、ソースコードの記載順に配置されます。

{order:表示順}

初期値は「0」ですが、プロパティの初期値より小さい負の値「-1」を指定すると、一番最初に表示させることができます。

逆に、他の「flexアイテム」が初期値のままで、あるflexアイテムの「order」を「1」にとすると一番最後に表示されます。

通常の表示順

[CSS]　order：number;

 #flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border:1px dotted #FF00FF;
　　}
 .fnumber1,.fnumber2,.fnumber3,.fnumber4,.fnumber5
	{
	flex: auto;
	height: 50px;
	border-radius: 2px;
	margin:3px;
	text-align:center;
	color:#CCC;
	padding-top:25px;
　　}
 .fnumber1 {order:1;background-color:#960;}
 .fnumber2 {order:2;background-color:#666;}
 .fnumber3 {order:3;background-color:#090;}
 .fnumber4 {order:4;background-color:#FF0;}
 .fnumber5 {order:5;background-color:#F0F;}

[HTML]

 <div ="flex-container">
  <div class="fnumber1">1</div>
  <div class="fnumber2">2</div>
  <div class="fnumber3">3</div>
  <div class="fnumber4">4</div>
  <div class="fnumber5">5</div>
 </div>

表示順の変更

[HTML]

 <div ="flex-container">
  <div class="fnumber5">1</div>
  <div class="fnumber4">2</div>
  <div class="fnumber1">3</div>
  <div class="fnumber2">4</div>
  <div class="fnumber3">5</div>
 </div>

【CSS】Flexコンテナ内のFlexアイテムの表示順を指定する「order」プロパティ

{order:表示順}

通常の表示順

表示順の変更

関連ページ一覧