概要
CSS order プロパティは、flex コンテナ内で flex アイテムをレイアウトに使用する順序を指定します。要素は、order の値の昇順に配置されます。order の値が同じ要素は、ソースコード内で現れる順に配置されます。
注意: order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order を speech など、visual ではないメディアで使用してはいけません。
| 初期値 | 0 |
|---|---|
| 適用対象 | flex items and absolutely-positioned flex container children |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 可。 の値として補完しますinteger |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。
構文
/* 負の値を含む数値 */ order: 5; order: -5; /* グローバル値 */ order: inherit; order: initial; order: unset;
値
<integer>- flex アイテムが割り当てられる順序グループを表します。
形式構文
<integer>
例
基本的な HTML 一式:
<!DOCTYPE html> <header>…</header> <div id='main'> <article>…</article> <nav>…</nav> <aside>…</aside> </div> <footer>…</footer>
以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
仕様書
| 仕様書 | 状況 | 備考 |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'order' in that specification. |
Last Call Working Draft | 最初の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 21.0-webkit 29 |
18.0 (18.0)[1] 20.0 (20.0) 28 |
10.0-ms[2] |
12.10 | 7 -webkit 9 |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | ? | ? | 18.0 (18.0)[1] 20.0 (20.0) |
? | 12.10 | 7 -webkit 9 |
[1] Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定layout.css.flexbox.enabled を true に変更します。複数ラインの flexbox は Firefox 28 からサポートしています。
現在 Firefox は、要素のタブオーダーを誤って変更しています。バグ 812687 をご覧ください。
[2] Internet Explorer 10 では、flex コンテナを display:flex ではなく display:-ms-flexbox を使用して宣言します。またこのプロパティは、非標準の名称 -ms-flex-order として実装しています。