Flex-boxのコンテンツの表示順を変更する方法

Flex-boxのコンテンツの表示順を変更する方法について解説します。

りゅう

デザインカンプを見て、スマホレイアウトでコンテンツの並びが変わってる！なんてことがありました。

同じ要素を２個を記述して、画面幅に応じてメディアクエリで片方を表示、非表示なんて面倒くさいことしなくても実装する方法があるので紹介します。

orderプロパティで表示順を変更

Flex-boxのコンテンツの表示順を変更したい場合には、orderプロパティを使用します。

display: flex;を指定した要素の子要素は、フレックスアイテムとなり、orderプロパティを使用することができます。

orderプロパティは、フレックスアイテムの表示順を設定します。

orderプロパティの初期値は0で、数字が小さい順に表示されます。

何も指定が無ければ、すべてのフレックスアイテムでorderプロパティ値が0なので、HTMLを記述した順に表示されます。

＜記述例＞

See the Pen Untitled by 竜貴族 (@czuqbsxm-the-selector) on CodePen.

上記例の場合、orderの指定がないアイテム1、3，5から配置され（orderプロパティ値の初期値が0のため）、次に、order1を指定したアイテム2が4番目、最後にorder2を指定したアイテム4が配置されます。

並びの順を逆にする場合は、flex-direction: column-reverse;、flex-direction: row-reverse;で指定する方法もありますが、１部のコンテンツのみ並びを変える場合は、orderを使うことができます。

orderプロパティ使い方

記述例でも紹介しましたがorderプロパティ使い方は、表示順を変更したい要素にorderを指定します。

通常、PCレイアウトのコーディングの際にはコンテンツの順番通りにHTMLを記述しますので、使用しない場合が多いです。

しかし、スマホレイアウトなどのレスポンシブ対応時にデザインによっては使用するケースがあるかもしれません。

.item1 {
  background: black;
}

.item2 {
  background: gray;
}
@media (max-width: 767px) {
  .item2 {
    order: 1;
  }
}

.item3 {
  background: blue;
}

.item4 {
  background: green;
}
@media (max-width: 767px) {
  .item4 {
    order: 2;
  }
}

.item5 {
  background: red;
}

メディアクエリを使用し、レスポンシブ対応時に表示順を変更する要素にorderを指定します。

私は、ポートフォリオの以下のサイトで使用しました。

Rich-Life家具・家電のサブスクリプションサービス（架空サイト）

Basic認証
ユーザーID test
パスワード test

まとめ

Flex-boxのコンテンツの表示順を変更する方法として、orderプロパティを紹介しました。

使い方は、表示したい順にorderプロパティで値を小さい数字から指定していきます。

これで、CSSのみで表示順を変更することができます。

ぜひご活用ください。