order 属性 用来设置或检索弹性盒模型对象的项目（子元素）在容器中出现的順序。
您可以通过具体的数值来定义项目在容器中的位置。其中 number 就是项目在容器中的位置，默认值为 0。
注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。
属性的语法格式如下：
order: number;实际应用形式：
.item-box {
order:3;
}这里我们以实例给大家做参考
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex-box {
display: flex;
}
.flex-box div {
width: 60px;
height: 60px;
margin: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-box">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
</body>
</html>默认flex模式下是顺序排列的
当我们通过order改变数值，可以改变排列顺序
.flex-box div:nth-child(1) {
order: 5;
}
.flex-box div:nth-child(2) {
order: -1;
}
.flex-box div:nth-child(3) {
order: 9;
}
.flex-box div:nth-child(4) {
order: 3;
}
.flex-box div:nth-child(5) {
order: 0;
}具体形式可参考下图
-
css详解系列：09-flex项目属性简介在接下来的文章里，我们会对flex项目（即单个 “item”）属性逐一做详细介绍
-
css详解系列：11-flex项目属性align-selfalign-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果，看看如何实现的。
-
css样式表的三种样式css（级联样式表）主要有三种样式定义方式
-
如何在css中实现样式优先级在css中，样式优先级是由一系列规则决定的，这些规则决定了当多个样式规则应用于同一个HTML元素时，哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中，如果你想让超出特定长度的文本显示为三个点（...），你可以使用text-overflow属性，配合overflow和white-space属性。
暂无评论，抢个沙发...