Flexアイテムの並び順

Flexアイテムの順序を変更する場合は、orderプロパティ（旧仕様ではbox-ordinal-groupプロパティまたは、flex-orderプロパティ）を使用します。
このプロパティはorderの設定値（初期値を含む）の最低値から順番に並びます。

ただし、orderは論理的ではなく視覚的な順序にすぎないため、音声読み上げ等HTML構造そのままで解釈します。

構文

order:並び順;

プロパティ名	初期値	適用範囲	継承	設定可能値
order	0	Flexアイテム	しない	数値（負の指定も可能）

サンプルコード

item 1

item 2

item 3

CSS

.flex-container {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
}

	.flex-item:nth-child(3) {
		-webkit-box-ordinal-group:-1;
		-moz-box-ordinal-group:-1;
		-webkit-flex-order:-1;
		-moz-flex-order:-1;
		-webkit-order:-1;
		-moz-order:-1;
		-ms-order:-1;
		order:-1;
	}

シミュレーション

CSS3逆引きリファレンス一覧へ戻る