order

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

構文

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

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

値

<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 の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。

• Flexbox & the keyboard navigation disconnect — Tink
• Source Order Matters | Adrian Roselli
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.2  | W3C Understanding WCAG 2.0

仕様

ブラウザー実装状況

関連情報

• CSS Flexbox ガイド: フレックスボックスの基本概念
• CSS Flexbox ガイド: Flex アイテムの順序を設定する
• CSS Grid ガイド: CSS Grid Layout and accessibility