order

order は CSS のプロパティで、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。明示的に order 値が指定されていないアイテムには、既定値である 0 が代入されます。

試してみましょう

order: 0;

order: 3;

order: -1;

order: 2;

<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element">Box 1:</div>
 <div style="order: 1">Box 2: <code>order: 1;</code></div>
 <div style="order: 2">Box 3: <code>order: 2;</code></div>
 <div style="order: 2">Box 4: <code>order: 2;</code></div>
 <div style="order: 3">Box 5: <code>order: 3;</code></div>
</section>

.default-example {
 max-height: 300px;
 display: flex;
 flex-flow: column;
}
.default-example > div {
 background-color: rgb(0 0 255 / 0.2);
 border: 3px solid blue;
 margin: 0.5rem;
 padding: 0.5rem;
 flex: 1;
}
#example-element {
 background-color: rgb(255 0 200 / 0.2);
 border: 3px solid rebeccapurple;
}
#example-element::after {
 content: attr(style);
 outline: 2px dashed;
 font-family: monospace;
}

上記のデモでは、左側のオプションを選択して、ピンクのボックスの order プロパティの値を変更してください。水色のボックスには、固定の order 値が指定されています。

ソースの順序による効果に注意してください。例えば、order: 2; を選択すると、ピンクのボックスは order: 2; の 2 つの青いボックスの前に配置されます。これは、ソースコードではピンクのボックスが青いボックスの前に表示されるためです。

構文

/* <integer> 値 */
order: 5;
order: -5;
/* グローバル値 */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;

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

このプロパティはCSS 表示方法モジュールで定義されていますが、グリッドおよびフレックスアイテムにのみ影響します。その要素が親要素の display プロパティがフレックスまたはグリッドコンテナーを形成しない場合、order を設定しても、効果はありません。

値

<integer>

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

アクセシビリティ

order プロパティを指定すると、コンテンツの視覚的な表示と DOM の順序が一致しなくなります。これにより、スクリーンリーダーなどの支援技術を使用して操作を行う視覚障害のあるユーザーに悪影響が及びます。視覚的な順序が DOM の順序と異なる場合、ユーザーはコンテンツへのアクセス方法によって異なる体験をしてしまいます。

• Flexbox & the keyboard navigation disconnect (Tink, 2016)
• Source Order Matters (Adrian Roselli, 2015)
• MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
• Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0

公式定義

形式文法

order = 
 <integer> 

<integer> = 
 <number-token> 

例

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

この例では、2 つのサイドバーを備えた伝統的なレイアウトを作成します。

HTML

ヘッダー、フッター、および本文領域が含まれます。本文には、記事と 2 つのサイドバーが含まれます。その順序に注意してください。 CSS の order プロパティを使用して、視覚的な順序を変更します。

<header>ヘッダー</header>
<main>
 <article>記事</article>
 <nav>ナビ</nav>
 <aside>余談</aside>
</main>
<footer>フッター</footer>

CSS

メイン領域は、フレキシブルボックスレイアウトモジュールの機能を使用してスタイルを設定します。display を flex に設定すると、<main> 要素がフレックスコンテナーになります。既定では、これにより、垂直サイズが等しいフレックスアイテムが作成されます。サイドバーにはどちらも絶対的な width が指定されており、 <article> は正の余白を、 flex 一括指定で設定した flex-grow 係数に応じて消費します。

次に、フレックスコンテナーの 3 つの子要素それぞれに異なる order プロパティの値を設定します。これは、 CSS が HTML で宣言された順序ではなく、その要素の視覚的な順序を定義していることを意味します。

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

結果

<article> はソースの順序では最初に現れますが、視覚的には中央に表示されます。

仕様書

ブラウザーの互換性

関連情報

• フレックスボックスの基本概念
• フレックスアイテムの順序
• グリッドレイアウトとアクセシビリティ
• CSS 表示方法モジュール
• Reading order