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
登録日 : 2015年05月23日 最終更新日 : 2015年10月8日