共计 853 个字符,预计需要花费 3 分钟才能阅读完成。
应用 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 属性,因为我的项目无论如何都会占用所有可用空间。不同的值之间不会有区别。