要素を横並びにするときに便利なフレックスボックス。

CSSのorderプロパティを使うことで、並んでいるフレックスアイテムの順番を入れ替えることができます。

どんな指定をするのか、どう入れ替わるのか、きちんと理解しておきたいですよね。

今回は、CSSのorderを使って、フレックスアイテムの順番を入れ替える方法を知りたい、という方のために

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのorderでフレックスアイテムの順番設定ができるようになりますよ。

ぜひ最後まで読んでくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

orderとは？どんなときに使うもの？

フレックスボックスは、フレックスコンテナと、その中にある複数のフレックスアイテムで構成されています。

フレックスアイテムは、基本的に記述した順番に並びますね。

CSSのorderを使って、この順番を変更することができます。

具体的には以下のように記述します。

.flex-item {
  order: 3;
}

値に数値が書かれていますね。この値は、3番目に並ぶ、という意味ではないので注意しましょう。

フレックスアイテムはorderの値が小さい順に並びます。数値を大きくすることで、後ろに配置することができます。

値にはマイナスの数値を指定することもでき、特定のアイテムを先頭に持ってきたいときなどに、マイナスを利用します。

orderの初期値は0なので、マイナスにすると先頭に出てくる、ということですね。

orderの使用例

実際にフレックスボックスを作成し、CSSのorderを指定することでどう変化するのか解説していきます。

<div class="flex-container">
  <div class="flex-item item1">アイテム1</div>
  <div class="flex-item item2">アイテム2</div>
  <div class="flex-item item3">アイテム3</div>
  <div class="flex-item item4">アイテム4</div>
  <div class="flex-item item5">アイテム5</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap; 
  border: solid 3px #ccc;
}

.flex-item {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 5px;
  text-align: center;
  line-height: 100px;
}

基本的なフレックスボックスを作りました。見やすいようにコンテナとアイテムに装飾をしています。

この状態では、左から右に順番にアイテムが並んでいますね。

ここに以下のCSSを付け加えます。

.item2 {
  order: 3;
}

.item5 {
  order: -1;
}

アイテムの順番が変わったのが確認できるでしょうか。

アイテム5は先頭に、アイテム2は最後尾になりましたね。

アイテム1、3、4については何も指定していないため、「order: 0」となります。それより小さい数値のものが左に、大きい数値のものが右に移動しています。

数値を変えて、色々と試してみてくださいね。

使用時の注意点について

CSSのorderは、フレックスアイテムの順番を変えられる便利なプロパティですが、注意も必要です。

視覚上は順番は変わりますが、DOMツリー（要素の階層構造）には影響を与えないため、スクリーンリーダーなど視覚支援ツールが読み上げる順番は変わりません。以下、引用させていただきます。

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

https://developer.mozilla.org/ja/docs/Web/CSS/order

順番が重要になるアイテムには、このプロパティを使用しないようにしましょう。

まとめ：CSSのorderは、小さい数値ほど前に来る

今回は、CSSのorderについて、使い方と注意点について解説してきました。

数値が小さいものほど前に配置され、数値がそのまま順番を指すわけではない、ということも覚えておきましょう。

今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP