ブログ投稿日時：
ブログ更新日時：
orderについて解説
1.
order とは
orderはフレックスアイテムを任意の順番に並び替えるプロパティです。
2.
order の指定方法
それでは order の指定方法を見ていきましょう。
<div class="items">
<div class="item item--04">4</div>
<div class="item item--01">1</div>
<div class="item item--05">5</div>
<div class="item item--02">2</div>
<div class="item item--03">3</div>
</div>.items {
display: flex;
gap: 16px;
}
.item {
width: calc((100% - 16px * 4) / 5);
background-color: #ff0000;
color: #fff;
}
.item--01 {
order: 1;
}
.item--02 {
order: 2;
}
.item--03 {
order: 3;
}
.item--04 {
order: 4;
}
.item--05 {
order: 5;
}HTMLとCSSの表示
1
2
3
4
5
上記のように order を指定すると番号の小さい順から優先に並んでいきます。
3.
今回のまとめ
この記事では order について解説しました。
order はフレックスアイテムを任意の順番に並び替えるプロパティです。
レスポンシブ対応でよく使っていることが多い印象です。
ぜひ、この記事でorderの使い方をマスターしていただけると嬉しいです。
最後までお読みいただきありがとうございます。