flexで要素の順番を入れ替える方法

CSSでdisplay: flexを使うといい感じに横並びにできていいよね。

でもレスポンシブした時に要素の順番を変えたいなって思うこと多い。そんな時に使えるのが「order」なんだ。

じゃー早速使い方を見てみよう。

.wrapp {
  display: flex;
}

.wrapp　.img {
  order: 2;
}

.wrapp　.text {
  order: 1;
}

このようにflexの子要素に「order」プロパティを付与して利用します。
この場合は「.text」が先頭にきて、「.img」が２番目にくる感じですね。

次に、flexで順番を入れ替えるdemoの確認をHTMLと合わせて見てみましょう。

デモ

<div class="wrapp">
  <div class="img">
    <img src="https://hajimete.org/wp-content/uploads/2024/03/img.jpg" alt="flexイメージ" />
  </div>
  <div class="text">
    <p>このイメージはテロッとした様子を表している代表的なイメージです。このイメージはテロッとした様子を表している代表的なイメージです。このイメージはテロッとした様子を表している代表的なイメージです。このイメージはテロッとした様子を表している代表的なイメージです。</p>
  </div>
</div>

このイメージはテロッとした様子を表している代表的なイメージです。このイメージはテロッとした様子を表している代表的なイメージです。このイメージはテロッとした様子を表している代表的なイメージです。このイメージはテロッとした様子を表している代表的なイメージです。

HTML上では画像が先にきていますが、CSSの「order」プロパティを利用することで
テキストを先に表示して後からイメージを出す事ができていますね。

もっと「order」プロパティについて理解するために、もうひとつdemoを見ていきましょう。
次のdemoは、画像を３つ並べて「order」プロパティで順番を入れ替えてみようと思います。

デモ

HTML

<div class="clr-wrapp">
  <div class="red">
    <img src="https://hajimete.org/wp-content/uploads/2024/03/red.png" alt="赤いイメージ" />
  </div>
  <div class="yellow">
    <img src="https://hajimete.org/wp-content/uploads/2024/03/ylw.jpg" alt="黄色いイメージ" />
  </div>
  <div class="green">
    <img src="https://hajimete.org/wp-content/uploads/2024/03/green.jpg" alt="緑のイメージ" />
  </div>
</div>

CSS

.clr-wrapp {
 display:flex;
}
.clr-wrapp .red {
 order: 3;
}
.clr-wrapp .yellow {
 order: 1;
}

このように「order」プロパティを指定して、自分の中では🟨🟩🟥の順番に並べ替えようとしましたが実際はどうでしょう。

信号機みたいですねw

実際には🟩🟨🟥になってしまいました。
なぜかというと「order」プロパティの初期値はゼロのため「.yellow」に指定した「order」の数字よりも
「order」を指定していない緑が先にきてしまったんですね。

これでflexでの順番を入れ替えるやり方は完璧ですね！

以上でした。