例
柔軟性のある項目の順序を設定します。
/* Code for Safari 6.1 to 8.0 */
div#myRedDIV {-webkit-order: 2;}
div#myBlueDIV {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV {-webkit-order: 1;}
/* Standard syntax */
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV
{order: 3;}
div#myPinkDIV {order: 1;}
»それを自分で試してみてください 定義と使用法
順序プロパティは、同じコンテナ内の柔軟なアイテムの残りの部分への柔軟な項目の相対的な順序を指定します。
Note:要素が柔軟な項目でない場合は、注文プロパティは効果がありません。
| デフォルト値： | 0 |
|---|---|
| 継承されました： | no |
| アニメーション： | yes, see individual properties . Read about animatable Try it |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.order="2" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。
| プロパティ | |||||
|---|---|---|---|---|---|
| order | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
CSSの構文
order:number|initial|inherit;プロパティ値
| 値 | 説明 |
|---|---|
| number | デフォルト値0は、柔軟性のある項目の順序を指定します。 |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSリファレンス： flex property
CSSリファレンス： flex-basis property
CSSリファレンス： flex-direction property
CSSリファレンス： flex-flow property
CSSリファレンス： flex-grow property
CSSリファレンス： flex-shrink property
CSSリファレンス： flex-wrap property
CSSリファレンス： align-content property
CSSリファレンス： align-items property
CSSリファレンス： align-self property
HTML DOMリファレンス： order property