ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】orderでflexアイテムを並び替える方法を解説

【CSS】orderでflexアイテムを並び替える方法を解説

HTML/CSS

2022/05/16

2023/05/08

display: flex; を使用したレイアウトを作成したとき、「flexアイテムの配置を変更したい」と思うことはありませんか？

そのようなときは order プロパティを使用しましょう。数値を指定することで簡単にflexアイテムの配置を決定できます。

この記事では order の使い方を解説します。

この記事で身につく内容

orderプロパティの使いどころ
orderプロパティの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

orderとは
orderの使い方
- すべてのflexアイテムにorderを指定する場合
- 一部のflexアイテムにorderを指定する場合
まとめ

orderとは

order はflexアイテムを配置する順番を指定するプロパティです。

通常、HTMLで作成した要素は左から順番に並んでいきます。しかしorder を使用すれば、特定の要素のみを好きな場所に移動できます。

orderの使い方

order はflexアイテムに対して有効なプロパティであるため、親要素に display: flex; を、子要素に order をそれぞれ指定します。

以下がorderの基本形です。

.flexbox {
  display: flex;
}

.flex-item {
  order: 数値;
}

初期値は0で、マイナスの値も指定できます。

order の値による要素の動き方は次の項目で詳しく解説します。

すべてのflexアイテムにorderを指定する場合

すべてのflexアイテムに order を指定する場合、要素の配置は数値が小さいものから順に配置されます。

以下が記述例です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
}

.flex-item {
  width: 30%
  color: #fff;
  text-align: center;
}

.item01 {
  background-color: red;
  order: 1;
}

.item02 {
  background-color: blue;
  order: 2;
}

.item03 {
  background-color: green;
  order: 3;
}

.item04 {
  background-color: black;
  order: 0;
}

.item05 {
  background-color: purple;
  order: -1;
}

order の値が小さいものから順に配置されました。今回の例では、order: -1; がもっとも小さな値であるため、-1を指定した .item05 クラス要素がもっとも左に配置されています。

一部のflexアイテムにorderを指定する場合

一部のflexアイテムのみに order を指定する場合、要素の表示順は次のようになります。

order を持つflexアイテム（ order の値がマイナスのflexアイテム）
order を持たないflexアイテム（ order の値が0のflexアイテム）
order を持つflexアイテム（ order の値がプラスのflexアイテム）

つまり、order を指定していない要素の値を0として、order の値が小さい順に要素が並んでいきます。

以下が記述例です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
}

.flex-item {
  width: 30%
  color: #fff;
  text-align: center;
}

.item01 {
  background-color: red;
  order: 1;
}

.item02 {
  background-color: blue;
  order: 0;
}

.item03 {
  background-color: green;
  order: -1;
}

.item04 {
  background-color: black;
}

.item05 {
  background-color: purple;
}