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页面的灵活性和创造力。