box-direction
「box-direction」はFlexコンテナボックスの子要素(Flexアイテム)の並び順を指定するための古いプロパティです。
当初は並び順を指定はこのbox-directionプロパティとbox-orientプロパティという2つのプロパティで仕様策定が進められていましたが、最終的には「flex-directionプロパティ」が採用されました。
box-directionプロパティやbox-orientプロパティを利用する際にはflex-directionプロパティも併用して指定してください。
box-directionは「display:box」と同じ要素に定義でき、以下の値を指定することができます。
| normal | 左から右に並べられる(初期値) |
|---|---|
| reverse | 逆方向(右から左)に並べられる |
| 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年08月03日 最終更新日 : 2015年10月8日