CSS order 属性
定義と用法
order 属性は、同一コンテナ内の他のエラストシックアイテムに対するエラストシックアイテムの順序を指定します。
注釈：要素がエラストシックアイテムでない場合、order 属性は無効です。
も参照してください：
CSS リファレンスマニュアル：flex 属性
CSS リファレンスマニュアル：flex-basis 属性
CSS リファレンスマニュアル：flex-direction 属性
CSS リファレンスマニュアル：flex-flow 属性
CSS リファレンスマニュアル：flex-grow 属性
CSS リファレンスマニュアル：flex-shrink 属性
CSS リファレンスマニュアル：flex-wrap 属性
CSS リファレンスマニュアル：align-content 属性
CSS リファレンスマニュアル：align-items 属性
CSS リファレンスマニュアル：align-self 属性
HTML DOM リファレンスマニュアル：order 属性
例
エラストシックアイテムの順序を設定：
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}
CSS 语法
order: number|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| number | デフォルト値は 0 です。エラストシックアイテムの順序を指定します。 |
| initial | この属性をデフォルト値に設定します。参照 initial。 |
| inherit | この属性を親要素から継承します。参照 inherit。 |
技術的な詳細
| デフォルト値： | 0 |
|---|---|
| 継承： | no |
| アニメーション作成： | サポートされています。それぞれの属性を参照してください。参照：アニメーションに関連する属性。 |
| バージョン： | CSS3 |
| JavaScript 文法： | object.style.order="2" |
ブラウザのサポート
テーブルの数字には、その属性を完全にサポートする最初のブラウザバージョンが記載されています。
-webkit- または -moz- の数字に従って、プレフィックスを使用する最初のバージョンを選択してください。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
|
29.0 21.0 -webkit- |
11.0 |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
