概要

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 の定義
勧告候補 最初の定義

ブラウザ実装状況

機能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
基本対応 ? ?

あり

あり -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.

参考情報

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

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