orderプロパティの説明
CSSのorderプロパティは、フレックス・ボックスやグリッド・レイアウトのコンテナに並ぶアイテムの順序を指定します。アイテムは、このプロパティに指定された値の昇順で並び、さらにソースコード上の順序で配置されます。
指定箇所はコンテナに配置されるアイテムとなる要素です。orderの値は数値で指定します。複数のアイテムに同じ値を指定すると、順序のグループとなります。
orderに指定できる値
<integer>- アイテムの順序を表す値です。複数のアイテムに同じ値が指定されると、グループとして扱われます。
orderの使い方とサンプルコード
orderプロパティの構文は以下の通りです。
/* <integer>値 */
order: 1;
order: 3;
order: -3;
/* グローバル値 */
order: inherit;
order: initial;
order: revert;
order: unset;
orderの実例
それでは実際にorderプロパティの書き方を見ていきましょう。以下の例は、displayにflexを指定したコンテナにアイテムを配置し、先頭のアイテムに異なるorderの値を指定した場合の比較です。
orderの値が等しいアイテムは、同等の優先順位を持つグループとなりますが、ソースコードで先に書かれている方が優先的に配置されます。
<div class="samp_box">
<h2>先頭のアイテム order: 1;</h2>
<section class="flex_box">
<div class="ord_1">Order 1</div>
<div class="ord_2">2</div>
<div class="ord_3">3</div>
<div class="ord_4">4</div>
<div class="ord_5">5</div>
</section>
<h2>先頭のアイテム order: 3;</h2>
<section class="flex_box">
<div class="ord_3">Order 3</div>
<div class="ord_2">2</div>
<div class="ord_3">3</div>
<div class="ord_4">4</div>
<div class="ord_5">5</div>
</section>
<h2>先頭のアイテム order: 5;</h2>
<section class="flex_box">
<div class="ord_5">Order 5</div>
<div class="ord_2">2</div>
<div class="ord_3">3</div>
<div class="ord_4">4</div>
<div class="ord_5">5</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
resize: horizontal;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.flex_box {
margin: .5rem 0 0;
display: flex;
gap: 1rem;
}
.flex_box div {
width: 20%;
padding: .3rem;
background: #09f;
color: #fff;
text-align: center;
flex: 1 1 auto;
}
.flex_box div:first-of-type {
background: #f60;
}
.ord_1 {
order: 1;
}
.ord_2 {
order: 2;
}
.ord_3 {
order: 3;
}
.ord_4 {
order: 4;
}
.ord_5 {
order: 5;
}