0
点赞
收藏
分享

微信扫一扫

SAP UI5 应用 FlexBox 控件 growFactor 的使用方法

​​SAP UI5 应用 FlexBox 控件 growFactor 的使用方法​​

使用 Flex Box Layout 布局方式,开发人员可以让浏览器处理元素的分布。 这确保应用的元素始终填充沿主轴的可用空间。 为了达到这个目的,需要为 Flex Item 设置一个弹性系数(​​flexibility factor​​)。

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

下图是一个例子:

SAP UI5 应用 FlexBox 控件 growFactor 的使用方法_CSS

弹性布局算法决定弹性项目的 ​​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 属性,因为项目无论如何都会占用所有可用空间。 不同的值之间不会有区别。




2022-12-25 22:09  ​​JerryWang_汪子熙​​ 

举报

相关推荐

0 条评论