CSS3のorderプロパティでFlexアイテムを個別に並べ替える方法

CSS3で個々のフレックスアイテム(Flex Item)を並べ替えるには、orderプロパティを使用します。orderプロパティに整数値を指定することで、HTMLの記述順序に関係なく、値の小さいアイテムから順に表示されます。指定しない場合のデフォルト値は「0」です。

以下は、フレックスアイテムを並べ替えるためのコード例です。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   height: 150px;
   display: flex;
   width: 100%;
   border: 2px solid red;
}
div {
   width: 200px;
   height: 150px;
   color: white;
   text-align: center;
   font-size: 30px;
}
.first {
   background-color: rgb(55, 0, 255);
   order:2;
}
.second {
   background-color: red;
   order:3;
}
.third {
   background-color: rgb(140, 0, 255);
   order:1;
}
</style>
</head>
<body>
<h1>Reordering individual items example</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、以下のように表示されます。

解説

この例では、HTML上の記述順序は「First Div → Second Div → Third Div」ですが、orderプロパティの設定により表示順序が変化します。

• .third(order:1)が最初に表示される
• .first(order:2)が2番目に表示される
• .second(order:3)が最後に表示される

つまり、実際の画面上では「Third Div → First Div → Second Div」の順序で描画されます。このようにorderプロパティを活用すれば、HTML構造を変更することなく、見た目上の配置だけを柔軟に制御できます。レスポンシブデザインで要素の並び順を画面幅に応じて切り替えたい場合などにも非常に便利な機能です。