かんたんCSS3 order, フレックスアイテムの並びの順序を変える

CSS3では、フレックスで配置を変える方法がたった数行でできるようになりました。

そのほかにもいろいろなことができます。今回は、フレックスで配置されたアイテムの表示順を変える方法です。

2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

order アイテムの順序を変える

.items {
  order: <integer>;
}

orderプロパティは番号順に並びます。整数であればマイナス値も指定できます。

（小数値は指定できません。）

初期値は0なので、マイナス値はorderプロパティが未指定のアイテムの前に配置されます。

サンプルを見てみましょう。

まずは、HTMLから。

<div class="sample">
<div class="container flex">
  <div class="box items1">4</div>
  <div class="box items2">3</div>
  <div class="box items3">2</div>
  <div class="box items4">1</div>
  <div class="box items5">0</div>
  <div class="box items6">-1</div>
  <div class="box items7">-2</div>
  <div class="box items8">-3</div>
  <div class="box items9">-4</div>
</div>
</div>

このまま実行しても分かりづらいので、CSSも加えます。

.sample .container .box {
  background: rgba(255, 144, 130, 0.7);
  color: #fff;
  margin: 3px;
  padding: 0 3px;
  text-align: center;
}
.sample .flex {
  display: flex;
}
.sample .container .items1 {
  order: 4;
}
.sample .container .items2 {
  order: 3;
}
.sample .container .items3 {
  order: 2;
}
.sample .container .items4 {
  order: 1;
}
.sample .container .items6 {
  order: -6;
}
.sample .container .items7 {
  order: -7;
}
.sample .container .items8 {
  order: -8;
}
.sample .container .items9 {
  order: -9;
}

CSSで、番号順に並ぶようにorderで指定します。

HTMLの結果を順序変更の前と後の2つを出力します。

並び替えができていることが分かります。かんたんですね？

もうひとつ、orderの値が同じものはHTMLの書き順です。同じ数字のグループをつくってグループごとに分けることもできます。

例えばこんな感じです。

CSSは新たにクラスを追加します。HTMLはアイテムのクラスを変更します。

.sample .container .group1 {
  order: 1;
}
.sample .container .group2 {
  order: 2;
}
.sample .container .group3 {
  order: 3;
}

<div class="sample">
<div class="container flex">
  <div class="box group1">1-1</div>
  <div class="box gruop2">2-1</div>
  <div class="box group3">3-1</div>
  <div class="box gruop1">1-2</div>
  <div class="box gruop2">2-2</div>
  <div class="box group3">3-2</div>
  <div class="box group1">1-3</div>
  <div class="box group2">2-3</div>
  <div class="box group3">3-3</div>
</div>
</div>

HTML結果です。

まとめ

フレックスを使ってアイテムの表示順序を変える方法をご紹介しました。

Webサイトを作る分には、あまり使い道はないかもしれません。おそらく、HTMLを修正するほうが早いこともあるでしょう。

ただ今のWebの技術は、生のHTMLを書くことが減ってきています。HTMLは自動出力されます。

このようなことから、自動出力で修正部分が上書きされるので、HTMLを修正するのはやめたほうがいいです。

CSSでサクッと修正するほうがよいです。

フレックスのすごいところはこれだけではありません。まだまだほかにもあります。

ただ、今回の目的が『フレックスのアイテム順序を変えよう』なので、ほかのことは省略しました。

ここで説明すると長くなるのでとりあえずここまでにします。

かんたんCSS3 ぜんぶ解説。誰でも分かるflexの使い方

tadtadya.com