アイテムに使用できるFlexboxのプロパティ
order: アイテムの並び順を指定
- order: アイテムの順番指定の数値;
order を指定することで、HTML要素の記述順にかかわらず、特定の要素の並び順を指定することが可能になります。
先ほどの align-items の例で使用した実例に少し手を加えて order を適用した場合の反映結果を見ていきましょう。
先ほどの例では、画像の順番が以下だったのに対し、
order で順番を、以下のようにバラバラに指定することができます。
ソースコードは以下です。
<div class="wrapper">
<img class="ornament" src="./img/annie-spratt-V705bwrTnQI-unsplash.jpg" alt="christmas_decoration" />
<img class="red-branch" src="./img/kris-atomic-FiQcUMgD3Jk-unsplash.jpg" alt="red_branch" />
<img class="gluwein" src="./img/hannah-pemberton-bXi4eg4jyuU-unsplash.jpg" alt="gluwein" />
<img class="stollen" src="./img/food-photographer-jennifer-pallian-_Skvg1Izyxc-unsplash.jpg" alt="stollen" />
</div>
.ornament {
order: 3;
}
.red-branch {
order: 4;
}
.gluwein {
order: 1;
}
.stollen {
order: 2;
}