[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)。

ITPub博客

SAP UI5 FlexBox Layout 布局的概念和具体使用案例介绍试读版

最新文章