无障碍问题
order 属性在内容的视觉显示和 DOM 顺序之间创建了脱节。
这可能会影响使用辅助技术（例如屏幕阅读器）的低视力用户。
如果视觉顺序是必不可少的，屏幕阅读器用户将无法获得正确的阅读顺序。
| 初始值 | 0. |
|---|---|
| 应用于 | Flex项目（item）（item）和绝对定位的Flex容器儿童。 |
| 继承 | 无效 |
| 可动画的 | 是的。元素的顺序是有动画的。 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.Order =“4”; |
CSS order 属性值说明
| 值 | 描述 |
|---|---|
| number | 定义容器中灵活项目（item）（item）的顺序。默认值为0。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
order: number | initial | inherit;
订单属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#example {
width: 400px;
height: 200px;
border: 1px solid #000;
display: -webkit-flex;/* Safari */
display: flex;
}
#example div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 30px;
font-family: sans-serif;
}
/* Safari 6.1+ */
div#blue {
-webkit-order: 2;
}
div#green {
-webkit-order: 3;
}
div#grey {
-webkit-order: 1;
}
div#yellow {
-webkit-order: 4;
}
/* Standard syntax */
div#blue {
order: 2;
}
div#green {
order: 3;
}
div#grey {
order: 1;
}
div#yellow {
order: 4;
}
</style>
</head>
<body>
<h2>Order 属性示例</h2>
<div id="example">
<div style="background-color: #1c87c9;" id="blue">1</div>
<div style="background-color: #8ebf42;" id="green">2</div>
<div style="background-color: #666;" id="grey">3</div>
<div style="background-color: #f4f442;" id="yellow">4</div>
</div>
</body>
</html>
应用于容器类的 order 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.box:nth-of-type(1) {
order: 4;
}
.box:nth-of-type(2) {
order: 1;
}
.box:nth-of-type(3) {
order: 3;
}
.box:nth-of-type(4) {
order: 5;
}
.box:nth-of-type(5) {
order: 2;
}
.box {
background: #1c87c9;
padding: 5px;
width: 100px;
height: 100px;
margin: 5px;
line-height: 100px;
color: #eee;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<h2>Order property</h2>
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
</ul>
</body>
</html>
在上面提到的例子中，order 属性定义了灵活项目（item）（item）的顺序。
根据用户要求，每一项都有编号。
order 属性用于指定 flex 或者 grid 容器内的弹性项目（item）（item）的顺序。
order 属性是弹性框布局模块的一部分。
order 属性是 CSS3 属性之一。
如果元素不是灵活项目（item）（item），则 order 属性不起作用。
日期：2020-06-02 22:14:41 来源：oir作者：oir