CSS3 box-ordinal-group 属性
CSS3 box-ordinal-group属性
CSS3中的box-ordinal-group属性可以让用户通过数字来决定元素的显示顺序。这个属性只支持display值为flex或grid的容器，它可以更改容器中元素的默认顺序。
语法示例
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
box-ordinal-group: 1;
属性值
CSS3 box-ordinal-group属性继承父元素的属性值，其中：
- 该属性的默认值为1；
- 属性值需要是大于等于1的整数。
- 属性值越小，该元素的层级就越高，反之，越大则层级越低，即数字越大的元素就排在数字越小的元素之后。
- 如果两个元素的box-ordinal-group值相同，则它们的实际位置还会受到它们在HTML中的位置的影响。
兼容性
以下浏览器支持CSS box-ordinal-group属性：
- 火狐：6.0+
- 谷歌：29+
- Safari：6.1+
- Opera：17+
- IE/Edge：不支持。
使用方法
一般来说，使用CSS3 box-ordinal-group属性的情形应该是一下三种：
1、容器内元素排列调整
假设您的容器内元素排列顺序为1-2-3-4，现在需要将元素4放到第2位，元素3放到第4位，则可以这样写：
/*原有CSS**/
.item:nth-child(1){order: 1;}
.item:nth-child(2){order: 2;}
.item:nth-child(3){order: 3;}
.item:nth-child(4){order: 4;}
/*改变CSS**/
.item:nth-child(1){order: 1;}
.item:nth-child(2){order: 4;}
.item:nth-child(3){order: 3;}
.item:nth-child(4){order: 2;}
2、移动特定元素至最后/最前
使用box-ordinal-group属性可以将一个元素直接移动到列表的上方或下方，实现的效果类似于在列表中将一个元素向上/下移动：
.item:nth-child(3) {
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
-ms-box-ordinal-group:1;
box-ordinal-group:1;
}
这个代码块会将第三个元素排在第一个，从而实现上移的效果。
3、实现元素一连串排序控制
假设你有一些元素需要按照数字排序（如A1、A2、A3、B1、C2等等）， box-ordinal-group可以很好的解决这个问题：
/* before */
.A1 { box-ordinal-group:1; }
.A2 { box-ordinal-group:3; }
.A3 { box-ordinal-group:2; }
.B1 { box-ordinal-group:4; }
.C2 { box-ordinal-group:5; }
/* after */
.A1 { box-ordinal-group:1; }
.A2 { box-ordinal-group:2; }
.A3 { box-ordinal-group:3; }
.B1 { box-ordinal-group:4; }
.C2 { box-ordinal-group:5; }
这个代码块会将指定的元素按照1、2、3、4、5进行顺序排序，实现元素排序的功能。
小结
CSS3 box-ordinal-group属性相对使用较少，但在满足它使用条件的前提下，可以极大地扩展CSS排版变化方式，提高CSS页面的灵活性和创造力。