乐趣区

关于前端:SAP-UI5-应用-FlexBox-控件-growFactor-的使用方法

应用 Flex Box Layout 布局形式,开发人员能够让浏览器解决元素的散布。这确保利用的元素始终填充沿主轴的可用空间。为了达到这个目标,须要为 Flex Item 设置一个弹性系数(flexibility factor)。

管制 flexibility factor 的具体属性称为 growFactor。它通过 layoutData 聚合上的 FlexItemData 设置在弹性我的项目对象上。

下图是一个例子:

弹性布局算法决定弹性我的项目的 natural 宽度。如果还有残余空间,这个空间会依据它们的绝对增长因子 (growFactor) 调配给弹性我的项目。

例如,如果一个 horizonzal flex 容器是 300px 宽,并且蕴含两个 100px 的元素,那么将残余 100px 的额定宽度。

如果两个 flex 我的项目的 growFactor 都设置为 1,则两者都会额定减少 50px,也就是二者平分这残余的 100 px 额定宽度,从而使它们的宽度为 150px。如果一个我的项目的 growFactor 设置为 3,另一个我的项目设置为 1,则第一个我的项目取得额定的 75px(100px 的 ¾)残余空间,第二个我的项目取得 25px(100px 的 ¼)。

如果 growFactor 设置为其默认值 0,则该 item 不被视为 Flex Item,并且两个我的项目都将放弃其 100px 的宽度。

要依据 growFactor 实现比例宽度,请通过 CSS 将所有我的项目的宽度设置为 0。所有我的项目的“天然”宽度之和也为 0。然而,残余空间当初等于 FlexBox 的全副空间。而后依据 growFactor 调配这个空间。对于下面 growFactor 设置为 3 和 1 的示例,通过 CSS 将 flex 我的项目的宽度设置为 0 导致第一个我的项目的宽度为 225px(300 像素的 ¾),第二个我的项目的宽度为 75px(300 像素的 ¼)。

一旦为任何我的项目设置了 growFactor,弹性布局算法就会疏忽 FlexBox 的 justifyContent 属性,因为我的项目无论如何都会占用所有可用空间。不同的值之间不会有区别。

退出移动版