CSS3ボックスdirectionプロパティ
例
DIVボックスの子要素を表示するには、右から左へ:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
»をお試しください
ブラウザのサポート
現在主流のブラウザはボックス方向のプロパティをサポートしていません。
-ms-フレックス方向支持することにより、Internet Explorer 10私有財産。
MOZ-ボックス方向のサポート - 私有財産によってFirefoxの。
私有財産-webkit-ボックス方向特性によって、SafariやChromeの。
注:IEのInternet Explorer 9の以前のバージョンでは、柔軟性のあるボックスをサポートしていません。
属性の定義と指示
ボックス方向属性がどの方向表示ボックスの子要素を指定します。
デフォルト: | ノーマル |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.boxDirectionは= "逆" |
文法
箱-方向:ノーマル|リバース|継承します。
値 | 説明 |
---|---|
ノーマル | デフォルトの方位表示のサブ要素です。 |
リバース | 子要素の反対方向に。 |
受け継ぎます | あなたは、サブ要素からプロパティ値ボックス方向を継承する必要があります |