CSS3 box-flex-group 属性
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。