[SAP UI5](https://sapui5.hana.ondemand.com/#/topic/674890e6d8534eaba2eaf63242e077eb) 官網提到了所謂 FlexBox Layout 佈局的概念。文件提到，FlexBox 佈局可以讓 SAP UI5 介面上的控制元件充分利用螢幕可用空間，避免空間的浪費或者控制元件之間出現重疊的現象發生。

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

其實這個 FlexBox 佈局並非 SAP UI5 獨創，而是 HTML 支援的標準佈局方式之一，`sap.m` 名稱空間下的 `FlexBox`，只是對這種佈局方式的包裝器，方便 SAP UI5 應用開發人員使用罷了。

我們首先來簡單瞭解一下 HTML 支援的 Flex 佈局。

158 資料夾下有個檔案 `example.html`，我們直接用瀏覽器開啟，看到如下效果：

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

簡單看看這個檔案的原始碼實現：我們把三個 div 元素，放置到了另一個具有 css 類，`flex-container` 的 div 元素內。後者的 css 類具有一行屬性，在第 6 行程式碼進行維護：`display: flex`

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

擁有屬性 `display: flex` 的 HTML 元素，會被瀏覽器當作一個 Flex 容器處理，這個元素裡所有的直接子元素，都被瀏覽器看作 Flex 容器內的 item 元素，從而進行 Flex 佈局。所謂 Flex 佈局，即 Flex 容器內的子元素，會盡可能填充容器內的可用空間。如果 Flex 容器內部有多個子元素，則這些子元素們填充可用空間的比例，透過每個子元素的 flex-grow 屬性指定。

如上圖第 23～25 行程式碼所示，三個子元素透過 `flex-grow` 屬性分別指定了填充比例為 1：2：3，也就是說，把它們的父元素 div 標籤內的可用元素劃分成 6 份，三個 div 子元素分別佔據 1 份，2 份和 3 份。

Chrome 開發者工具對 flex 佈局的支援較好，可以在開發者工具裡直接檢視和動態修改 Flex 容器的各種屬性。
![](https://img-blog.csdnimg.cn/img_convert/7cc1daebe54499f042eb7e4587f2af4d.png)

(1) 上圖左邊的小圖示提示當前的元素是一個 flex 佈局的容器
(2) 上圖右邊的圖示允許前端開發人員，在 Chrome 開發者工具裡面透過不修改原始碼的情況下，動態修改 flex 容器的其他屬性

![](https://img-blog.csdnimg.cn/img_convert/12a868cc50df1ba527e65ab309d575d5.png)
比如我們透過 Chrome 開發者工具將 flex-direction 設定為 `row-reverse` 之後，flex 容器內的子元素，就會按照它們在原始碼裡出現的位置`相反`的順序進行佈局，如下圖所示：

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

在 `Layout` 標籤頁下面還有個 `Flexbox` 區域，點選 checkbox，可以用用開發人員指定顏色的虛線，顯示 flex 容器的輪廓。

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

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

學習了 HTML 標準的 flex 知識後，我們就可以進一步瞭解 FlexBox 佈局在 SAP UI5 裡的實現了。

具體介紹請閱讀筆者這篇[文章](https://blog.csdn.net/i042416/article/details/128524888)。

SAP UI5 FlexBox Layout 佈局的概念和具體使用案例介紹試讀版

相關文章