box-orient

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

box-orient」はFlexコンテナボックスの子要素(Flexアイテム)の並び順を指定するための古いプロパティです。

当初は並び順を指定はこのbox-orientプロパティbox-directionプロパティという2つのプロパティで仕様策定が進められていましたが、最終的には「flex-directionプロパティ」が採用されました。

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

box-orientは「display:box」と同じ要素に定義でき、以下の値を指定することができます。

normal 左から右へ水平に表示
vertical 上から下へ垂直に重ねて表示
inline-axis インラインレベル要素のように表示
block-axis ブロックレベル要素のように表示
inherit 親要素の値を継承して表示

.flex{
	display : -webkit-box; /*for so old Webkit Browser*/
	display : -ms-flexbox; /* for IE10 */
	display : -webkit-flex; /*for old Webkit Browser*/
	display : flex;
	-webkit-box-direction : reverse; /*for so old Webkit Browser*/
	-webkit-box-orient : vertical; /*for so old Webkit Browser*/
	-ms-flex-direction : column-reverse; /* for IE10 */
	-webkit-flex-direction : column-reverse; /*for old Webkit Browser*/
	flex-direction : column-reverse;
	padding:2px;
	background: black;
}

対応ブラウザ

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

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

参考URL

3 Display order - CSS3 - W3C

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

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

検索

スポンサードリンク

バージョン

リファレンス