CSS3 box-ordinal-group 属性

box-ordinal-group 属性用于指定一个元素在 flexbox 布局中的显示顺序。默认情况下，元素的显示顺序是根据其在 DOM 树中的位置来决定的，但使用 box-ordinal-group 属性可以改变元素的显示顺序。

语法

box-ordinal-group: <integer>;

• <integer>：指定元素的显示顺序，值越小，显示越靠前。

示例

// www.javascriptcn.com code example
.container {
  display: flex;
}

.item1 {
  box-ordinal-group: 2;
}

.item2 {
  box-ordinal-group: 1;
}

.item3 {
  box-ordinal-group: 3;
}

在上面的示例中，.item1 元素的 box-ordinal-group 值为 2，.item2 元素的值为 1，.item3 元素的值为 3。因此，它们在 .container 中的显示顺序为 .item2、.item1、.item3。

使用 box-ordinal-group 属性可以实现更加灵活的布局，特别是在需要改变元素显示顺序但不想改变 DOM 结构时非常有用。