SAPUI5官网提到了所谓FlexBoxLayout布局的概念。文档中提到FlexBox布局可以让SAPUI5界面上的控件充分利用屏幕上的可用空间，避免浪费空间或控件之间重叠。其实这种FlexBox布局并不是SAPUI5独创的，而是HTML支持的标准布局方式之一。sap.m命名空间下的FlexBox只是对这种布局方式的包装，方便SAPUI5应用开发者使用。我们先简单了解一下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）上图右边的图标可以让前端开发者在不修改源码的情况下动态修改flexChromeDeveloperTools对于容器的其他属性，比如我们通过Chrome开发者工具将flex-direction设置为row-reverse后，flex容器中的子元素会按照源码中出现的顺序倒序排列代码，如下图所示：Layout选项卡下还有一个Flexbox区域。单击复选框以显示带有开发人员指定颜色的虚线的flex容器的轮廓。在学习了HTML标准的flex知识之后，我们可以进一步了解FlexBox布局在SAPUI5中的实现。详细介绍请阅读作者文章。
