板简单配置属性实现基本的布局。
● 自适应布局：适合使用标准页面在不同大小屏幕（PC、平板、手机等）下呈现出 开发者想要的显示效果场景。
● 高级布局设置：针对有丰富前端开发经验的用户通过“样式”面板对页面进行更 深度的个性化布局定制。
基础布局设置
标准页面提供流式布局（Flow Layout）和弹性布局（Flex Layout），标准页面的基础 布局主要是通过“容器”组件实现的。
“容器”组件就是基础的布局容器，可以将它理解为CSS中DIV的概念，DIV是层叠样 式表中的定位技术，全称Division，即为划分；有时可以称其为图层。 DIV是HTML中 的一个标签元素，用来为HTML文档内大块的内容提供结构和背景的元素，您可以将
“容器”简单理解为画布，通过设置外层画布的属性达到控制内容布局的效果。
● 流式布局
“容器”组件默认弹性布局未开启，处于流式布局的状态，如图5-53所示。
图5-53 流式布局
在流式布局中，组件默认为块级（Block）元素，即不论组件宽度是多少，默认占 据全部父级元素的宽度。
如图5-54所示，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入两个
“标题”组件，“标题”组件为块级元素，默认占据全部父级元素宽度，即外层
“容器”的宽度，第二个“标题”组件会在第一个“标题”组件的下方。
图5-54 流式布局中组件为块级元素
流式布局中，组件由上至下依次排布，可以通过“水平对齐方式”对容器内组件 进行水平位置调整，如图5-55，图5-56所示。
图5-55 居中水平对齐
图5-56 靠右水平对齐
● 弹性布局
将“容器”组件属性面板中的“弹性布局”开启后，布局由流式布局切换到弹性 布局，弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方 式”、“垂直对齐方式”，如图5-57所示。
图5-57 弹性布局
为了方便演示说明弹性布局，向画布中拖拽一个“容器”组件，再向“容器”组 件中拖入五个“容器”组件，将每个“容器”组件的宽度和高度设置为100px，并 为每个“容器”组件设置不同的背景颜色，在每个“容器”中加入一个“标题”
组件，分别显示A、B、C、D、E。
默认弹性布局下，排列方向为“行”，水平对齐方式为“起点对齐”，垂直对齐 方式为“起点对齐”，如图5-58所示。
图5-58 弹性布局默认效果
排列方向属性决定了容器内组件的排列方向，当排列方向为“行”时，容器内组 件从左到右排布，排列方向为“列”时，容器内组件从上到下排布，如图5-59。
图5-59 排列方向“列”
水平排列方式属性决定了容器主轴方向排列方式，当容器排列方向为“行”时水 平排列方式属性作用于水平方向，容器排列方向为“列”时水平排列方式属性作 用于垂直方向。排列方向为行时起点为左，水平对齐方式选择“中间对齐”和
“终点对齐”时如图5-60、图5-61所示。
图5-60 水平对齐方式选择“中间对齐”
图5-61 水平对齐方式选择“终点对齐”
垂直排列方式属性决定了容器交叉轴方向排列方式，当容器排列方向为“行”时 垂直排列方式属性作用于垂直方向，容器排列方向为“列”时垂直排列方式属性 作用于水平方向。当容器排列方向为行时起点为上，垂直对齐方式选择“中间对 齐”和“终点对齐”时如图5-62、图5-63所示。
图5-62 垂直对齐方式选择“中间对齐”
图5-63 垂直对齐方式选择“终点对齐”
通过对弹性布局属性的不同组合配置实现用户想要实现的布局效果，例如将排列 方向设置为“行”，水平对齐方式和垂直对齐方式设置成“中间对齐”实现居中 布局的效果，如图5-64所示。
图5-64 弹性布局实现居中