使用 Flex Box Layout 佈局方式，開發人員可以讓瀏覽器處理元素的分佈。 這確保應用的元素始終填充沿主軸的可用空間。 為了達到這個目的，需要為 Flex Item 設定一個彈性係數(`flexibility factor`)。

控制 flexibility factor 的具體屬性稱為 `growFactor`。它透過 `layoutData` 聚合上的 `FlexItemData` 設定在彈性專案物件上。

下圖是一個例子：

![](https://img-blog.csdnimg.cn/img_convert/33122f824e9b4fa900e55721f9059925.png)

彈性佈局演算法決定彈性專案的 `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 屬性，因為專案無論如何都會佔用所有可用空間。 不同的值之間不會有區別。

SAP UI5 應用 FlexBox 控制元件 growFactor 的使用方法

相關文章