box-direction:親ボックス内に配置する子要素の表示方向を指定する
取り扱い | flex-directionに移行 |
適用対象 | boxまたはinlineboxの表示値を持つ要素 |
継承 | しない |
対応ブラウザ | caniuseで確認 |
このプロパティは非推奨または廃止になりました。新しく作るウェブサイトへの使用は避けて下さい。また、既存のソースコードの中に含まれている場合は更新をお勧めします。詳しくは現行の標準仕様に従って下さい。
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
box-directionに関連するCSSプロパティ
非推奨または廃止されたプロパティ | |
---|---|
background-break | インライン要素の背景画像の繰り返し方法を指定する |
baseline-shift | 優先するベースラインを指定し直す |
bookmark-label | ブックマークのラベル(名前)を指定する |
bookmark-level | ブックマークのレベル(度合い)を指定する |
bookmark-target | ブックマークのターゲット(対象)を指定する |
border-break | ボックスが分割された場合のボーダーの表示方法を指定する |
box-align | 親要素内に含まれる子要素を揃える水平位置の基準を指定する |
box-direction | 親ボックス内に配置する子要素の表示方向を指定する |
ime-mode | テキスト入力時のIMEの状態を指定する |
marker-offset | リストマーカーとの間隔を指定する |
page-break-after | 印刷時の改ページ位置を、特定の要素直後に指定する |
page-break-before | 印刷時の改ページ位置を、特定の要素直前に指定する |
scrollbar-base-color | スクロールバーのベースになる色を指定する |
scrollbar-arrow-color | スクロールバーの矢印にあたる色を指定する |
scrollbar-face-color | スクロールバーの表面にあたる色を指定する |
scrollbar-3dlight-color | スクロールバーの左端と上端にあたる色を指定する |
scrollbar-highlight-color | スクロールバーのハイライトにあたる色を指定する |
scrollbar-shadow-color | スクロールバーの影にあたる色を指定する |
scrollbar-darkshadow-color | スクロールバーの右端と下端にあたる色を指定する |
text-autospace | アルファベット等との間隔を指定 |
zoom | 要素の表示倍率(拡大・縮小)を指定する |