【CSS覚書】子要素の順番を入れ替える

2023年3月8日

毎度でございます、えばさん（@Ebba_oBL）です。

ボクがたまにしか使わなくてなかなか覚えないCSSのメモ記事です。毎度多くの方には興味の無い記事だと思います。

レスポンシブに対応する時にPCの表示とスマートフォンの表示の時で要素の順番で不都合が出てくることがあります。

以前は2通りのソースを書いておいて片方では非表示にするなど古典的な手法もつかっていましたがflexboxを使うと順序の入れ替えが容易に行えます。

HTML
<div class=”oya”>
　　<div class=”ko1″>コンテンツ1</div>
　　<div class=”ko2″>コンテンツ2</div>
　　<div class=”ko3″>コンテンツ3</div>
</div>

CSS
.oya {
  display: flex;
}

.ko1 {
  order: 3;
}

.ko2 {
  order: 2;
}

.ko3 {
  order: 1;
}

順序を入れ替えたい親要素にdisplay:flex;を与え、あとは子要素にorderをつかって並び順を数字で記述してやるだけです。

上記の例だと子要素の3つのdivがHTMLソースとは逆の順番で並ぶことになります。

IEが存在した頃はflexboxを使うと面倒なこともあったようですが、現在は存分に使えて便利です。