フレキシブルボックスレイアウトでアイテムの並び順を指定する

2015年11月5日

フレックスアイテムはソースコードに書かれた順番でフレックスコンテナ内に普通は配置されます。アイテムの配置順序をしたいときは、それぞれのアイテムがどの順序グループに属するのかをorderプロパティで指定します。グループを表す値を整数で指定すると、値の小さいグループに属するアイテムから配置されます。同じグループに指定されているアイテムは、ソースコードに書かれている順番で配置されます。

orderプロパティの設定値(初期値は０)は、０以上の整数値で指定します。
サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>フレキシブルボックスでアイテムの並び順を指定する</title>
	<style>
	#container{
		width:480px;
		height:160px;
		border:1px solid black;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}
	.order1{
		-ms-flex-order:1;
		-webkit-box-ordinal-group:1;
		order:1;
	}
	.order2{
		-ms-flex-order:2;
		-webkit-box-ordinal-group:2;
		order:2;
	}
	.order3{
		-ms-flex-order:3;
		-webkit-box-ordinal-group:3;
		order:3;
	}
	.width50{width:50px;}
	.width100{width:100px;}
	.width150{width:150px;}
	.width200{width:200px;}
	.bgRed{   background-color:red;}
	.bgYellow{background-color:yellow;}
	.bgGold{  background-color:gold;}
	.bgSilver{background-color:silver;}

	</style>
</head>
<body>
<div id="container">
	<div class="width100 order2 bgYellow">1</div>
	<div class="width50 bgRed">2</div>
	<div class="width150 order1 bgSilver">3</div>
	<div class="width100 order3 bgGold">4</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>フレキシブルボックスでアイテムの並び順を指定する</title>

<style>

#container{

width:480px;

height:160px;

border:1px solid black;

display:-webkit-box;

display:-ms-flexbox;

display:flex;

}

.order1{

-ms-flex-order:1;

-webkit-box-ordinal-group:1;

order:1;

}

.order2{

-ms-flex-order:2;

-webkit-box-ordinal-group:2;

order:2;

}

.order3{

-ms-flex-order:3;

-webkit-box-ordinal-group:3;

order:3;

}

.width50{width:50px;}

.width100{width:100px;}

.width150{width:150px;}

.width200{width:200px;}

.bgRed{ background-color:red;}

.bgYellow{background-color:yellow;}

.bgGold{ background-color:gold;}

.bgSilver{background-color:silver;}

</style>

</head>

<body>

</div>

</body>

</html>