CSS3 box-flex-group 属性

box-flex-group 属性用于指定一个元素的弹性伸缩组。当一个元素具有 display: box 或 display: inline-box 样式时，box-flex-group 属性可以用来控制该元素在伸缩布局中的弹性伸缩行为。

语法

box-flex-group: <number>;

• <number>：指定一个整数值，表示元素所属的弹性伸缩组。默认值为 1。

值

• number：指定一个整数值，表示元素所属的弹性伸缩组。可以是正数、负数或 0。

示例

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

.item1 {
  box-flex: 1;
  box-flex-group: 1;
}

.item2 {
  box-flex: 2;
  box-flex-group: 1;
}

.item3 {
  box-flex: 1;
  box-flex-group: 2;
}

在上面的示例中，.item1 和 .item2 属于同一个弹性伸缩组（box-flex-group: 1），它们的弹性伸缩比例分别为 1 和 2。而 .item3 则属于另一个弹性伸缩组（box-flex-group: 2）。

box-flex-group 属性可以帮助我们更灵活地控制弹性伸缩布局中的元素，使布局更加符合设计需求。