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; }
対応ブラウザ
当初は「box-orient」と「box-direction」という2つのプロパティで使用策定が進められていた経緯があり、Androidに関しては4.3以前と比較的新しいブラザウザでもflex-directionプロパティではなくbox-orientとbox-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日