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 里的实现了。
具体介绍请浏览笔者这篇文章。