CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 オーダー属性の使用方法と例

オーダーCSS属性は、フレックスコンテナ内でのエレメントの表示とレイアウト順序を指定します。要素は順序値の昇順で並べ替えられます。同じ順序値を持つ要素は、ソースコード内での出現順序に従ってレイアウトされます。

以下のテーブルには、このプロパティの使用方法とバージョンハイストリと、javascriptスクリプト内でのこのプロパティの使用構文が示されています。

デフォルト値：	0
適用範囲：	FlexアイテムとFlexコンテナの絶対位置子孫
継承：	ありません
アニメーション可能：	は。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.order="2"

orderの使用構文

このプロパティの構文は以下の通りです：

order:　integer　|　initial　|　inherit

以下の例では、orderプロパティの使用方法を示しています。

例

.flex-container　{
　　　　border:　2px　solid　#000;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
}

テストして見て‹/›

属性値

以下のテーブルはこのプロパティの値を説明しています。

値	説明
integer	エラストイックアイテムの順序を指定します。デフォルト値は0です。
initial	このプロパティをデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のorderプロパティの値を使用します。

ブラウザの互換性

orderプロパティのブラウザの互換性について、以下のテーブルにはそのプロパティをサポートするブラウザの最低バージョン番号が示されています；すべての主要ブラウザはこのプロパティをサポートしています。

	Firefox18+ ^-moz-、28+ Google Chrome 21+ ^-webkit-、29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

さらに詳しく

以下のチュートリアルを参照してください：CSSのフォント、CSSの単位、CSSの仮想要素。

CSS outline 属性 CSS3 opacity 属性