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

​​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 里的实现了。

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