CSSのorderプロパティでフレックスコンテナ内のアイテム表示順序を指定する方法
CSSのorderプロパティを使用すると、同じフレックスコンテナ内にある他のフレックスアイテムと比較した、各アイテムの表示順序を自由に指定できます。
orderプロパティの基本
orderプロパティには整数値を設定します。数値が小さいアイテムほど先頭に近い位置に表示され、数値が大きいほど後ろに配置されます。デフォルト値は0であり、同じorder値を持つアイテムは、HTMLソースコード上の出現順に並べられます。
このプロパティを活用すれば、HTMLのマークアップ順序を変更することなく、見た目上の並びだけをCSSで制御できるため、レスポンシブデザインやレイアウト調整において非常に便利です。
サンプルコード
以下のコードを実行すると、orderプロパティによる並べ替えの動作を確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
align-content: space-between;
height: 150px;
width: 600px;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div style = "order: 8">Q1</div>
<div style = "order: 6">Q2</div>
<div style = "order: 2">Q3</div>
<div style = "order: 1">Q4</div>
<div style = "order: 7">Q5</div>
<div style = "order: 4">Q6</div>
<div style = "order: 3">Q7</div>
<div style = "order: 5">Q8</div>
</div>
</body>
</html>
実行結果のポイント
このサンプルでは、Q1からQ8までの8つのアイテムにそれぞれ異なるorder値（1〜8）が設定されています。そのため、ブラウザでの表示はHTMLの記述順ではなく、order値が小さい順に「Q4 → Q3 → Q7 → Q6 → Q8 → Q2 → Q5 → Q1」という並びになります。
-
CSSでフレックスアイテムをコンテナの中央に揃える方法
CSSでフレックスアイテム（flexアイテム）をコンテナの中央に配置したい場合は、justify-content プロパティに center を指定します。このプロパティは、主軸（デフォルトでは水平方向）に沿ってフレックスアイテムをどのように配置するかを制御するもので、center を設定すると余白が均等に分配され、アイテム全体がコンテナの中央にまとまります。justify-content の基本的な使い方親要素に display: flex; を適用したうえで、justify-content: center; を追加するだけで、子要素が中央寄せされます。以下は代表的な指定例です。.mycon
-
CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)
CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り