概要
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 order の定義 |
勧告候補 | 最初の定義 |
ブラウザ実装状況
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 29 21 -webkit- | 12 12 -webkit- | 201 49 -webkit- 18 — 283 | 11 10 -ms- | 12.1 | 9 7 -webkit- |
| Absolutely-positioned flex children | あり | 12 | なし | 10 | 12.1 | あり |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | ? | ? | あり あり -webkit- | 201 49 -webkit- 18 — 283 | 12.1 | 9 7 -webkit- | ? |
| Absolutely-positioned flex children | ? | ? | ? | なし | 12.1 | あり | ? |
1. Since Firefox 28, multi-line flexbox is supported.
2. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
3. From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
参考情報