为 Flex 项应用 order
属性
在这一步中,你将学习如何使用 order
属性来改变 flex 项的视觉顺序,而无需修改 HTML 结构。更新你的 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
属性的强大功能。