SAP UI5 里 FlexBox 的使用方法

ScrollContainer 的使用方式：

ScrollContainer 是一个控件，可以在有限的屏幕区域内显示任意内容，并提供滚动以使所有内容都可访问。注意，为了避免影响用户使用体验，不要嵌套沿相同方向滚动的滚动区域。例如，在启用滚动的页面控件(Page Control)内垂直滚动的 ScrollContainer——这种多重滚动条会让用户无所适从。

sap.m.FlexBox 控件允许开发布局以适应可用空间，并避免未使用的空间或溢出。

用户界面通常必须适应不同的屏幕尺寸。 因此，以单一布局可靠地适合可用屏幕空间的方式构建用户界面，很多时候会给开发人员带来挑战。 这种情况下可以嵌套 FlexBox 控件以创建更复杂的布局。

FlexBox 控件的两个主要用途是：

• 二维布局
• 实现灵活的布局

给 FlexBox 添加子控件，有下列两种方式：

addItem 方法

var oMyFlexbox = new sap.m.FlexBox();
oMyFlexbox.addItem( new sap.m.Button({text: "Button 1"}) );
oMyFlexbox.addItem( new sap.m.Button({text: "Button 2"}) );

使用 items 聚合：

var oMyFlexbox = new sap.m.FlexBox({
  items: [
    new sap.m.Button({text: "Button 1"}),
    new sap.m.Button({text: "Button 2"})
  ]
});

效果如下：

一些影响布局的属性需要在 FlexBox 控件中设置。 其他属性可以附加到通过 layoutData 聚合放置在 FlexBox 内的控件。 例如，布局方向在 FlexBox 中通过如下属性设置：

var oMyFlexbox = new sap.m.FlexBox({
  items: [
    new sap.m.Button({text: "Button 1"}),
    new sap.m.Button({text: "Button 2"})
  ],
  direction: "Column"
});

效果如下：

FlexBox 控件是 CSS 中灵活框布局属性的包装器。控件呈现器在适当的 HTML 元素上设置 CSS 属性（包括必要时的前缀版本）。实际的布局是由浏览器完成的。

开发人员放置在 FlexBox 控件中的控件分别包装在 DIV 或 LI 元素中，具体取决于 renderType 属性。 所有元素都放置在另一个 DIV 或 UL 容器内，同样取决于 renderType。 如果使用 Bare 作为 renderType，则元素将在没有包装 HTML 标记的情况下呈现。 最外层的元素代表所谓的弹性容器，而其子元素是弹性项目。 上述所有示例生成的 HTML 结构如下所示：

<div class="sapMFlexBox">
       <div class="sapMFlexItem">
              <button id="__button1">Button 1</button>
       </div>
       <div class="sapMFlexItem">
              <button id="__button2">Button 2</button>
       </div>
</div>