box-direction:親ボックス内に配置する子要素の表示方向を指定する
取り扱い | flex-directionに移行 |
適用可能 | boxまたはinlineboxの表示値を持つ要素 |
継承 | しない |
対応ブラウザ | box-directionの対応状況を確認する |
box-directionプロパティの説明
box-directionは、親ボックス内に含まれる子要素が並ぶ際に、左から右へ、または上から下へ配置するか、その逆に、右から左へ、または下から上へ配置するかを指定するために使用します。このプロパティは、フレキシブルボックス(flexbox)レイアウトモジュールの旧バージョンのため、実装する場合はflex-directionに移行してください。
box-directionに与えられる値
- normal
- 左端、または上端を開始位置として配置する(初期値)
- reverse
- 右端、または下端を開始位置として配置する
box-directionの使用サンプル
CSS
.box_sample { display:-moz-box; display:-webkit-box; display:-o-box; display:-ms-box; padding: 3px; margin: 0 0 50px 0; border: 1px solid #333333; } .dir_normal_h { box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; -o-box-orient: horizontal; -ms-box-orient: horizontal; box-direction: normal; -moz-box-direction: normal; -webkit-box-direction: normal; -o-box-direction: normal; -ms-box-direction: normal; } .dir_reverse_h { box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; -o-box-orient: horizontal; -ms-box-orient: horizontal; box-direction: reverse; -moz-box-direction: reverse; -webkit-box-direction: reverse; -o-box-direction: reverse; -ms-box-direction: reverse; } .dir_normal_v { box-orient: vertical; -moz-box-orient: vertical; -webkit-box-orient: vertical; -o-box-orient: vertical; -ms-box-orient: vertical; box-direction: normal; -moz-box-direction: normal; -webkit-box-direction: normal; -o-box-direction: normal; -ms-box-direction: normal; } .dir_reverse_v { box-orient: vertical; -moz-box-orient: vertical; -webkit-box-orient: vertical; -o-box-orient: vertical; -ms-box-orient: vertical; box-direction: reverse; -moz-box-direction: reverse; -webkit-box-direction: reverse; -o-box-direction: reverse; -ms-box-direction: reverse; }
HTML
<div class="box_sample dir_normal_h"> horizontal normal <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div class="box_sample dir_reverse_h"> horizontal reverse <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div class="box_sample dir_normal_v"> vertical normal <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div class="box_sample dir_reverse_v"> vertical reverse <div> 1 </div> <div> 2 </div> <div> 3 </div> </div>
表示確認
horizontal normal
1
2
3
horizontal reverse
1
2
3
vertical normal
1
2
3
vertical reverse
1
2
3