order

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

試してみましょう

構文

css

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

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

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

値

<integer>: アイテムが割り当てられる順序グループを表します。

アクセシビリティの考慮事項

order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、スクリーンリーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。

公式定義

初期値	`0`
適用対象	フレックスアイテム、グリッドアイテム、フレックスおよびグリッドコンテナーの絶対位置指定の子
継承	なし
計算値	指定通り
アニメーションの種類	integer

形式文法

order = 
  <integer>

例

フレックスコンテナー内のアイテムの並べ替え

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

HTML

html

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

CSS

css

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

結果

仕様書

Specification
CSS Display Module Level 3 # order-property

ブラウザーの互換性

BCD tables only load in the browser