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

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

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

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

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

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

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

.items {
  order: <integer>;
}

初期値

アイテムで指定します。

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

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

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

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

まずは、HTMLから。

ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

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も加えます。

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

-1

-2

-3

-4

before

-1

-2

-3

-4

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

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

例えばこんな感じです。

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

CSS

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

HTML

<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結果です。

group order

1-1

2-1

3-1

1-2

2-2

3-2

1-3

2-3

3-3

before

1-1

2-1

3-1

1-2

2-2

3-2

1-3

2-3

3-3

まとめ

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

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

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

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

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

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

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

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

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

前の投稿

かんたんCSS3 flex, 1行に詰めたり折り返しを指定する

かんたんCSS3 flex, アイテムの拡大・縮小・サイズを操作する

次の投稿

W3C公式ドキュメント

HTML&CSSの本

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。

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

まとめ

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

HTML&CSSの本

新着記事