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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

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

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

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

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

.items {
  order: <integer>;
}
初期値0

アイテムで指定します。

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
4
3
2
1
0
-1
-2
-3
-4
before
4
3
2
1
0
-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でサクッと修正するほうがよいです。

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

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

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

HTML&CSSの本
post-cta-image

たくさんあるなかで、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

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


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!