order

オーダー（フレックスボックス）

意味フレックスアイテムの表示順序

orderとは？

フレックスボックスにおいて、'order'プロパティはフレックスアイテムの表示順序を制御します。デフォルトの値は0で、数値が小さいほど先に表示されます。負の値も使用可能です。

orderの具体的な使い方

フレックスアイテムの表示順序を変更する例

<style>
  .container {
    display: flex;
  }
  .item1 {
    order: 1;
  }
  .item2 {
    order: 2;
  }
  .item3 {
    order: 3;
  }
</style>

<div class='container'>
  <div class='item2'>アイテム2</div>
  <div class='item3'>アイテム3</div>
  <div class='item1'>アイテム1</div>
</div>

フレックスコンテナ内の'.item'クラスを持つフレックスアイテムの表示順序を設定しています。

orderに関するよくある質問

Q. orderの値はどのように決まる？

A. orderの値は整数で指定し、小さい値ほど先に表示されます。デフォルト値は0で、負の値も使用可能です。

Q. orderはフレックスボックス以外で使える？

A. いいえ、orderプロパティはフレックスボックスのフレックスアイテムに対してのみ有効です。通常のブロック要素やインライン要素では機能しません。

Q. HTMLの順序とorderの関係は？

A. orderプロパティはCSS上での表示順序のみを変更し、HTMLの実際の順序やDOM構造は変更しません。スクリーンリーダーなどはHTMLの順序を基に読み上げるため、アクセシビリティに注意が必要です。

orderが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのorderやflex-grow、justify-content、flex-shrink、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。