CSS order 语法
在 CSS 中，order 属性用于定义 flex 容器或 grid 容器中子项的排列顺序。
语法：
order: n;说明：
n 是一个整数，通常为 0 或正数，也可以是负数。n 的默认值是 0，数值越小，元素排得越靠前。
对于 order 属性，小伙伴们要清楚以下几点。
- order 属性不仅可以用于 flex 容器，还可以用于 grid 容器。
- order 属性是在子元素中使用，而不是在父元素中使用。
- order 属性只改变视觉顺序，而不改变文档结构。这意味着屏幕阅读器和键盘导航仍然会遵循 HTML 源代码的顺序，这对于可访问性至关重要。
CSS order 摘要
| 属于 | CSS flex 布局 / CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | 0 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS order 示例
接下来，我们通过一个简单的例子来讲解一下 order 属性是如何使用的。
示例：order 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
display: flex;
width: 300px;
height: 200px;
background-color: skyblue;
}
.box > div:nth-child(1) {
flex: 1;
order: 3;
background-color: red;
}
.box > div:nth-child(2) {
flex: 2;
order: 2;
background-color: green;
}
.box > div:nth-child(3) {
flex: 3;
order: 1;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>页面效果如下图所示。
