CSS3 box-ordinal-groupプロパティ
例
指定されたboxの子要素の表示順序：
.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;
}
試してみる »
ブラウザサポート
現在の主要ブラウザはbox-ordinal-groupプロパティをサポートしていません。
Internet Explorer 10 は独自プロパティの ms-flex-order でサポートしています。
Firefox は独自プロパティの -moz-box-ordinal-group でサポートしています。
SafariとChromeは独自プロパティの -webkit-box-ordinal-group でサポートしています。
注意：Internet Explorer 9およびそれ以前のIEバージョンはフレックスボックスをサポートしていません。
プロパティの定義と使用説明
box-ordinal-group プロパティは、boxの子要素の表示順序を指定します。
値が低い要素は、値が高い要素よりも前に表示されます。
注意：同じ値のグループ内の要素の表示順序は、ソース順序によって決まります。
| デフォルト値： | 1 |
|---|---|
| 継承： | no |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.boxOrdinalGroup=2 |
構文
box-ordinal-group: integer;
| 值 | 説明 |
|---|---|
| integer | 子要素の表示順序を示す整数 |