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

SAP UI5 官网提到了所谓 FlexBox Layout 布局的概念。文档提到，FlexBox 布局可以让 SAP UI5 界面上的控件充分利用屏幕可用空间，避免空间的浪费或者控件之间出现重叠的现象发生。

其实这个 FlexBox 布局并非 SAP UI5 独创，而是 HTML 支持的标准布局方式之一，sap.m 命名空间下的 FlexBox，只是对这种布局方式的包装器，方便 SAP UI5 应用开发人员使用罢了。

我们首先来简单了解一下 HTML 支持的 Flex 布局。

158 文件夹下有个文件 example.html，我们直接用浏览器打开，看到如下效果：

简单看看这个文件的源代码实现：我们把三个 div 元素，放置到了另一个具有 css 类，flex-container 的 div 元素内。后者的 css 类具有一行属性，在第 6 行代码进行维护：display: flex

拥有属性 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 容器的各种属性。

(1) 上图左边的小图标提示当前的元素是一个 flex 布局的容器
(2) 上图右边的图标允许前端开发人员，在 Chrome 开发者工具里面通过不修改源代码的情况下，动态修改 flex 容器的其他属性

比如我们通过 Chrome 开发者工具将 flex-direction 设置为 row-reverse 之后，flex 容器内的子元素，就会按照它们在源代码里出现的位置相反的顺序进行布局，如下图所示：

在 Layout 标签页下面还有个 Flexbox 区域，点击 checkbox，可以用用开发人员指定颜色的虚线，显示 flex 容器的轮廓。

学习了 HTML 标准的 flex 知识后，我们就可以进一步了解 FlexBox 布局在 SAP UI5 里的实现了。

具体介绍请阅读笔者这篇文章。