CSS3ボックス - 序 - グループプロパティ
例
ボックスの子要素の表示順:
.box
{
display:-ms-flexbox; /* Internet Explorer 10 */
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1; /* Internet Explorer 10 */
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2; /* Internet Explorer 10 */
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari and Chrome */
box-ordinal-group:2;
}
{
display:-ms-flexbox; /* Internet Explorer 10 */
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1; /* Internet Explorer 10 */
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2; /* Internet Explorer 10 */
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari and Chrome */
box-ordinal-group:2;
}
»をお試しください
ブラウザのサポート
現在主流のブラウザでは、箱序グループのプロパティをサポートしていません。
私有財産のMS-フレックスためのサポートによって、Internet Explorerの10。
私有財産-moz-ボックス - 序・グループのサポートによって、Firefoxの。
私有財産、-webkit-ボックス - 序・グループのサポートによって、SafariやChromeの。
注:IEのInternet Explorer 9の以前のバージョンでは、柔軟性のあるボックスをサポートしていません。
属性の定義と指示
ボックス・序・グループ属性は、表示順序の子要素のボックスを指定します。
で高い値を持つそれらの要素の前に低い値を有する表示素子。
注:オーダーの同じ値のセットの要素を、そのソースの順序に依存。
デフォルト: | 1 |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.boxOrdinalGroup = 2 |
文法
ボックス序グループ:整数;
値 | 説明 |
---|---|
整数 | サブ要素の表示順を示す整数 |