此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

box-ordinal-group

非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性,因为它们在浏览器中的支持有限,且可能发生变化或被移除。不过,在没有标准选项的特定情况下,它们可以作为合适的替代方案。

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。

警告: 这是最初版 CSS 弹性盒布局模块草案中的一个属性。它在规范中已经被替代。关于当前标准的信息,请参见弹性盒子

CSS 属性 box-ordinal-group 用于将弹性盒子的子元素分配到一个序号组中。

序号组可以与 box-direction 属性配合使用,用于控制盒子的直接子元素的显示顺序。当计算得到的 box-direction 为 normal 时,盒子会从编号最小的序号组开始显示其元素,并确保这些元素出现在容器的左侧(对于水平盒子)或顶部(对于垂直盒子)。具有相同序号组的元素会按照它们在源文档树中的顺序进行排列。在反向方向下,序号组依然按照相同的顺序被检查,但元素的显示顺序会反转。

语法

css
/* <integer> 值 */
box-ordinal-group: 1;
box-ordinal-group: 5;

/* 全局值 */
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;

box-ordinal-group 属性指定为任意正整数 <integer>

形式定义

初始值1
适用元素children of box elements
是否是继承属性
计算值as specified
动画类型离散值

形式语法

box-ordinal-group = 
<integer>

示例

基本用法示例

在较早版本的规范中,box-ordinal-group 被引入,用于改变弹性容器中子元素的显示顺序。

css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
}

现代的弹性盒子等价属性是 order

规范

不属于任何标准。

浏览器兼容性

参见