Flex アイテムに order プロパティを適用する
このステップでは、HTML 構造を変更することなく、order
プロパティを使用して Flex アイテムの視覚的な順序を変更する方法を学びます。flexbox-order.html
ファイルの CSS に、特定のアイテムに order
プロパティを追加することで更新します。
.container {
display: flex;
width: 100%;
background-color: #f0f0f0;
padding: 20px;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
/* order プロパティを追加 */
.item1 {
order: 3;
}
.item2 {
order: 5;
}
.item3 {
order: 1;
}
.item4 {
order: 4;
}
.item5 {
order: 2;
}
order
プロパティに関する要点:
- すべての Flex アイテムの既定の
order
値は 0 です。
- 小さい
order
値が先に表示されます。
- HTML 構造を変更することなくアイテムの順序を再設定できます。
- 負の
order
値も許されます。
HTML ファイルをブラウザで開いたときの例の出力:
[アイテムはこの順序で表示されます]
Item 3 | Item 5 | Item 1 | Item 4 | Item 2
アイテムの順序は今では元の HTML 構造とまったく異なり、order
プロパティの威力を示しています。