flex-direction

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

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

flex-directionには以下の値を指定することができます。

機能
row 初期値、指定されたFlexアイテムは「左」から「右」に表示される。
row-reverse 指定されたFlexアイテムは「右」から「左」に表示される。
column 指定されたFlexアイテムは「上」から「下」に表示される。
column-reverse 指定されたFlexアイテムは「下」から「上」に表示される。

flex-direction」は以下のように「display:flex」や「display:inline-flex」(もしくは「display:flexbox」や「display:inline-flexbox」)と同じ要素に指定を行います。

.flex{
	display : -ms-flexbox; /*IE10*/
	display : -webkit-flex; /*old webkit browser*/
	display : flex;
	-ms-flex-direction:row-reverse; /*IE10*/
	-webkit-flex-direction:row-reverse; /*old webkit browser*/
	flex-direction:row-reverse;
	padding:2px;
	background: black;
}

sample

対応ブラウザ

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

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

5.1 Flex Flow Direction: the flex-direction property - flex - CSS3 - W3C
6.1. Flexbox Flow Direction: the ‘flex-direction’ property - flexbox - CSS3 - W3C

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

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

検索

スポンサードリンク

バージョン

リファレンス