CSS order プロパティは、フレックスコンテナやグリッドコンテナの中で、フレックスアイテムやグリッドアイテムを並べる順序を指定します。同じコンテナ内のアイテムは order の値の昇順に配置されます。order の値が同じ要素は、ソースコード内で現れる順に配置されます。

構文

/* <integer> 値 */
order: 5;
order: -5; 

/* グローバル値 */
order: inherit;
order: initial;
order: unset;

: order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。orderspeech など、視覚的ではないメディアで使用してはいけません。

<integer>
フレックスアイテムが割り当てられる順序グループを表します。 正の値、負の値、0 のいずれかです。

形式的構文

<integer>

基本的な HTML 一式:

<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>

以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。

main { display: flex;  text-align:center; }
main > article { flex:1;        order: 2; }
main > nav     { width: 200px;  order: 1; }
main > aside   { width: 200px;  order: 3; }

結果

アクセシビリティへの懸念

order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。

仕様

仕様書 策定状況 コメント
CSS Flexible Box Layout Module
order の定義
勧告候補 初期定義

初期値0
適用対象flex items and absolutely-positioned flex container children
継承なし
メディア視覚
計算値指定値
アニメーションの種類integer
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

29

21 -webkit-

12

12 -webkit-

201

49 -webkit-

48 -webkit- 2

18 — 283

11

10 -ms-

12.1

9

7 -webkit-

Absolutely-positioned flex children あり12 なし1012.1 あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

29

21 -webkit-

29

25 -webkit-

あり

あり -webkit-

201

49 -webkit-

48 -webkit- 2

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.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: sutara79, myakura, yyss, fscholz, teoli, ethertank
最終更新者: sutara79,