flex-order

このエントリーをはてなブックマークに追加

flex-orderプロパティはFlexアイテムの並び順を制御するための古いプロパティです。

Flexアイテムの並び順を制御は当初box-ordinal-groupプロパティとして策定されていましたが、途中でこのflex-orderプロパティに変更され、最終的には「orderプロパティ」が採用されました

flex-orderプロパティを利用する際にはorderプロパティも併用して指定してください。

Flexアイテムに対して並び順を指定することができます。

以下の様なHTMLに対して、次のようなCSSを適応します

HTML

<div class="flex">
	<div class="flex-item1">1</div>
	<div class="flex-item2">2</div>
	<div class="flex-item3">3</div>
</div>

CSS

.flex{
	display : -ms-flexbox; /*for IE10*/
	display : -webkit-flex; /* for old webkit browser */
	display : flex;
	padding:2px;
	background: black;
}
.flex-item1{
	-ms-flex-order:3; /*for IE10*/
	-webkit-order:3; /* for old webkit browser */
	order:3;
}
.flex-item2{
	-ms-flex-order:1; /*for IE10*/
	-webkit-order:1; /* for old webkit browser */
	order:1;
}
.flex-item3{
	-ms-flex-order:2; /*for IE10*/
	-webkit-order:2; /* for old webkit browser */
	order:2;
}

そうすることで、「.flex-item1」 → 「.flex-item2」 → 「.flex-item3」の順で表示されるはずの要素が 「.flex-item2」 → 「.flex-item3」 → 「.flex-item1」の順で表示されるようになります。

対応ブラウザ

当初は「box-ordinal-group」というプロパティで仕様策定が進められていた経緯があり、Androidに関しては4.3以前と比較的新しいブラザウザでもorderプロパティではなくbox-ordinal-groupプロパティを利用しなくてはこの機能は利用できない。

IE Edge Chrome Safari Firefox iOS Android
box-ordinal-group △ 4〜 △ 3.1〜 △ 2〜 △ 3.2〜 △ 2.1〜
flex-order △ 10
order ◯ 11 ◯ 12〜 △ 21〜
◯ 29〜
△ 6.1〜
○ 9〜
△ 18〜
○ 28〜
△ 7.1〜
○ 9〜
◯ 4.4〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。

登録日 : 2015年10月07日 最終更新日 : 2015年10月8日

同じカテゴリー(Flexible Box)のエントリー

検索

スポンサードリンク

バージョン

リファレンス