Flexアイテムに対しorderを指定しつつ子要素を追加していく時に、子要素が積まれる方向を確認する

Flexコンテナ内のFlexアイテムは、CSSのorderを用い任意の数字を指定することで表示順を変更することができます。

指定した数字の小さい値順に表示されますが、これはあくまで表示の順番が変わっているだけで、実際のDOM構造は変わっていません。

これを踏まえFlexアイテムに対しorderを指定しつつ、子要素を逐一追加していく処理を加える場合を考えます。この時、指定したorderの値と実際のDOM構造によっては追加されていく子要素が上方向に積まれる様子を見ることができます。

実際に例を見てみます。

以下はDOM上の順番=3の要素に対し、orderを-1と指定した例です。

const App = () => {
  return (
    <main style={{ display: "flex", flexDirection: "column" }}>
      <section>
        <h2>DOM上の順番=1</h2>
      </section>

      <section>
        <h2>DOM上の順番=2</h2>
      </section>

      <section style={{ order: -1 }}>
        <h2>DOM上の順番=3 / order指定=-1</h2>
      </section>
    </main>
  )
}

これを表示すると、一番上にDOM上の順番=3の要素が表示され、次にDOM上の順番=1の要素、最後にDOM上の順番=2の順序で要素が表示されます。

上記をベースに、ボタン押下で<sction>配下に子要素を逐一追加する処理を加えたものが以下です。

それぞれのボタンを押下すると、子要素が追加されていき次第にスクロールバーが表示されます。
この状態でスクロール位置を下げて子要素が積まれていく様子をそれぞれで見てみます。

orderを-1と指定したDOM上の順番=3の要素のみ子要素が上方向に積まれていることが確認できます。
これは子要素が本来のDOM順序に基づいて上方向に積み上げられた結果です。

今度はDOM上の順番=1の要素に対し、orderを3と指定し一番下に表示させ同様の操作を行うと、以下のようになります。

本来のDOM順序に基づいて下方向に積み上げられる様子が確認できます。

便利なorderですが、このような挙動が存在することには注意が必要です。特性を理解した上で、局所的に使うべきプロパティの代表格と言えます。