【CSS】flexboxの並び順を入れ替えるorderプロパティの使い方

2026/10/04

Flexboxを使ってレイアウトを組むと、HTMLの並び順はそのままに、見た目だけ順番を入れ替えたい場面があります。そんなときに役立つのがorderプロパティです。たとえば、スマホでは画像を上に、PCではテキストを先に見せたいといった調整も、HTMLを大きく書き換えずに実現できます。

この記事では、orderプロパティの基本的な使い方と、実際のレイアウトでの活用例を分かりやすく解説します。

orderプロパティとは

orderは、Flexboxの子要素の表示順を指定するプロパティです。通常、Flexboxの要素はHTMLに書いた順番で横並びや縦並びになりますが、orderを使うと、その順番を見た目だけ変更できます。

値には整数を指定します。小さい数ほど先に表示され、大きい数ほど後ろに表示されます。未指定の場合は0として扱われます。

.item {
  order: 1;
}

基本的な使い方

まずは、親要素にdisplay: flex;を指定し、その中の子要素にorderを設定します。以下の例では、3つの要素の表示順を入れ替えています。

<div class="box">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
</div>

.box {
  display: flex;
  gap: 10px;
}

.item {
  padding: 16px;
  background: #e8f0fe;
}

.item-a {
  order: 2;
}

.item-b {
  order: 1;
}

.item-c {
  order: 3;
}

この場合、HTML上はA→B→Cの順番ですが、表示はB→A→Cになります。orderの数字が小さいものから並ぶためです。

負の値も使える

orderには0以上の数字だけでなく、負の値も指定できます。たとえば、特定の要素を最初に表示したい場合は-1などを使います。

.item-first {
  order: -1;
}

このようにすると、同じorder: 0;の要素より前に配置されます。複雑に見えるときは、まず「小さい数が先」と覚えると分かりやすいです。

実務でよくある使い方

よくあるのは、カード型レイアウトや記事一覧で、画像とテキストの並びを画面サイズによって変えるケースです。HTMLの順番は読み上げや意味の流れを考えて決めておき、見た目の調整だけorderで行うと管理しやすくなります。

<div class="profile">
  <div class="profile__image">画像</div>
  <div class="profile__text">
    <h2>プロフィール</h2>
    <p>テキストが入ります。</p>
  </div>
</div>

.profile {
  display: flex;
  gap: 20px;
}

.profile__image {
  order: 2;
  width: 180px;
}

.profile__text {
  order: 1;
  flex: 1;
}

この例では、PC表示でテキストを先に見せるレイアウトになります。逆に、スマホでは縦並びにしてHTML順をそのまま見せたい場合は、メディアクエリでorderをリセットする方法が有効です。

メディアクエリと組み合わせる例

画面幅によって順番を切り替えると、レスポンシブ対応がしやすくなります。以下は、スマホでは画像を先に、768px以上ではテキストを先に表示する例です。

.profile {
  display: flex;
  flex-direction: column;
}

.profile__image {
  order: 1;
}

.profile__text {
  order: 2;
}

@media (min-width: 768px) {
  .profile {
    flex-direction: row;
  }

  .profile__image {
    order: 2;
  }

  .profile__text {
    order: 1;
  }
}

このようにすると、画面サイズに応じて自然に見え方を変えられます。HTMLを書き換えずに調整できるのがorderの大きな利点です。