order

概要

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]
11

 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 として実装しています。

参考情報

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

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