box-flex-group

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

已弃用：此功能不再推荐。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被删除过程中，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表，以指导您的决策。请注意，此功能可能会在任何时候停止工作。

警告：这是原始 CSS 弹性盒布局模块草案的属性。它已在规范中被替换。有关当前标准的信息，请参阅弹性盒。

box-flex-group CSS 属性将弹性盒的子元素分配给弹性组。

对于分配给弹性组的弹性元素，第一个弹性组为 1，更高的值指定后续的弹性组。初始值为 1。在划分盒子额外空间时，浏览器首先考虑第一个弹性组中的所有元素。该组中的每个元素都会根据该元素的灵活性与同一弹性组中其他元素的灵活性的比率获得额外的空间。如果组内所有弹性子元素的空间已增加到最大值，则该过程会对下一个弹性组内的子元素重复，使用上一个弹性组剩余的任何空间。一旦没有更多的弹性组，并且仍然有空间剩余，则根据box-pack 属性在包含盒中划分额外空间。

如果在计算子元素的首选空间后盒子会溢出，则以类似于添加额外空间时使用的 방식으로 弹性元素的空间被移除。每个弹性组依次被检查，并且根据每个元素的灵活性的比率移除空间。元素不会缩小到其最小宽度以下。

语法

css
/* <integer> values */
box-flex-group: 1;
box-flex-group: 5;

/* Global values */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;

box-flex-group 属性指定为任何正<integer>。

正式定义

初始值1
应用于盒元素的内联子元素
继承否
计算值按指定方式
动画类型离散

正式语法

box-flex-group =
  <integer>

示例

简单用法示例

在原始弹性盒规范中，box-flex-group 可用于将弹性子元素分配到不同的组，以在之间分配弹性空间

css
article:nth-child(1) {
  -webkit-box-flex-group: 1;
}

article:nth-child(2) {
  -webkit-box-flex-group: 2;
}

此功能仅在基于 WebKit 的浏览器中受支持，并且需要使用前缀，在后续版本的规范中，此功能没有等效的功能。相反，现在使用 flex-basis、flex-grow 和 flex-shrink 来处理弹性容器内部空间的分配。

规范

不属于任何标准。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅