CSS3 box-flex-group 属性

CSS3 box-flex-group 属性是一个用于定义一个伸缩容器里面的伸缩元素所属的组。当伸缩元素所属的组相同时，它们会在容器内共享可用的空间；而当它们所属的组不同时，则会根据组中所有元素的大小来分配可用的空间。

语法

flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
box-flex-group: <integer>

box-flex-group 属性值是一个整数，通常设置为从 1 开始的正整数，表示元素所属的伸缩组编号。如果未设置 box-flex-group 属性，则默认为 1，即所有内容都属于同一组。

值

• <integer>：一个正整数，指定元素所属的伸缩组编号。
• inherit：从父元素继承 box-flex-group 属性的值。

示例

<div class="container">
  <div class="item-1" style="flex: 1; box-flex-group: 1;">Item 1</div>
  <div class="item-2" style="flex: 1; box-flex-group: 2;">Item 2</div>
  <div class="item-3" style="flex: 1; box-flex-group: 2;">Item 3</div>
</div>

使用 box-flex-group 属性定义了 3 个元素，其中元素 1 属于组 1，元素 2 和 3 属于组 2。元素 1 会占据所有可用的空间，元素 2 和 3 会根据它们的大小分配在组 2 中。

浏览器兼容性

box-flex-group 属性是 CSS3 属性，目前已获得了所有现代浏览器的支持，但某些老版本浏览器不支持。针对不支持的浏览器，可以使用其他类似效果的属性或框架来兼容。

注意事项

• 不要在一个伸缩容器内同时使用 box-flex-group 属性和 flex 属性。如果两个属性同时存在，则 box-flex-group 属性会覆盖 flex 属性。
• box-flex-group 属性只能作用于某一个伸缩容器内的元素，不能作用于整个文档。
• box-flex-group 属性只能用于基于伸缩容器的布局，所以要先设置容器的 display 属性为 flex 或 inline-flex。