[]
本章介绍弹性布局的属性，通过场景来介绍它的功能和作用，熟悉属性的功能以便于在复杂的页面中，可以灵活进行配置，实现响应式布局。
水平排列
垂直排列
这2种排列的方式在使用的过程中，是最常用的，分别代表最典型的行和列排列的场景。如下图。
下图中的1和2，是典型的水平排列，按钮组操作栏排成一行
下图中的3，是垂直排列，从上到下排列
在一些复杂的场景下，需要灵活使用弹性布局进行嵌套，什么场景呢？就是排列方向有水平，也有垂直时，就需要使用弹性布局进行嵌套，如下图场景，红框中的布局需要使用弹性布局嵌套。
整体为上下，标题和卡片区域，所以第一层为弹性布局，垂直排列
垂直排列第一个元素为文本，第二个元素为弹性布局（水平排列）
当然第2个元素弹性布局内，还需要嵌套弹性布局，里面每一个小卡片的布局有水平还有垂直
弹性布局中2个重要的概念，就是主轴和交叉轴， 帮助我们理解和控制弹性布局容器中的子元素如何排列和对齐。
主轴是 弹性布局中子元素排列的主要方向，也就是元素的排列方向。
交叉轴是与 主轴垂直的轴，即 子元素排列方向的垂直方向。
项目排列方向：
水平排列：主轴就是水平方向，交叉轴就是垂直方向
垂直排列：主轴就是垂直方向，交叉轴就是水平方向
理解上面的主轴和交叉轴之后，才能配置项目在主轴的对齐方式 和 单行在交叉轴的对齐方式。下面通过几个实际场景介绍这2项的配置的使用效果。
在C8:L8区域，放置弹性布局单元格，弹性布局单元格的宽度即为C8：L8的宽度，高度就是第8行的高度，在我的示例中，行高和列宽都是32px
拖拽2个按钮到弹性布局中，分别为新建和导入，如下图
默认的排列方式就是从左到右
主轴对齐方式: 向主轴起点对齐，此处的起点表示是水平方向的最左侧1，新建和导入按钮从左到右依次排列显示
交叉轴对齐方式：拉伸填充，新建和导入按钮的高度会被拉伸填充，所以当容器的高度变化时，里面的元素高度自动变化
比如，把第8行的行高设置为64，弹性布局的高度就变成64，可以看到新建和导入按钮的高度也被拉伸成为64。
此时，选择按钮（比如新建按钮），在属性面板中，打开 项目在容器内的布局对话框，可以看到高度的值是32,与实际的情况不符，原因就是按钮的在交叉轴上是拉伸填充的，所以高度受容器的高度影响，此处高度无法起作用。
交叉轴对齐方式改成居中对齐，此时新建和导入按钮的高度恢复成32px，不受容器高度影响。
此时修改元素的高度起作用，如下图，修改高度为20px，可以看到生效。当然如果将交叉轴对齐方式改成向起点，终点对齐，高度也起作用，只是在垂直方向上的对齐方式不同。
上面展示的是水平排列从左到右，主轴和交叉轴对齐方式的配置，可以将其他对齐方式在活字格设计器中，都设置下，看看布局的效果，加深理解，后面的实际场景中，需要灵活使用对齐方式
向终点对齐的典型场景
通常的操作栏，会有左侧，从左到右排列的，以及靠右侧，从左到右排列的场景。此时可以使用以下对齐方式（向主轴终点对齐）就可以将操作按钮靠右对齐显示
弹性布局从上到下排列，此时主轴就变成了垂直方向，而交叉轴就是水平方式。如下图配置
查询和刷新按钮，从上到下排列，并且主轴方向是向起点对齐（起点即是容器的最上方），交叉轴对齐方式是拉伸填充，意思着查询和刷新按钮的宽度受容器的宽度影响，拉伸填充
所以同样的，在拉伸填充方式下，设置查询和刷新按钮的宽度，将不起作用。
对齐方式改成其他方式，比如居中对齐，然后再设置查询按钮和刷新按钮的宽度，发现可以生效，如下图在居中对齐方式下，查询按钮宽度设置了64px, 刷新按钮宽度100px。宽度生效并且在水平方向上居中显示。
在页面的搭建中，两端对齐方式也是非常常见的排列，如下图，左侧标题，右侧更多链接。
再比如如下图的操作栏，整体可以是弹性布局，两端对齐进行实现。
设计器中的设置如下，弹性布局水平排列，两端对齐，然后如何实现左侧2个按钮，右侧3个按钮呢。看以下步骤：
第8行，整体放一个弹性布局（弹性布局1），均匀分布，两端对齐不留白
拖拽一个新的弹性布局（弹性布局2）到弹性布局1中，此时会显示在弹性布局1的最左侧
再次拖拽一个新的弹性布局（弹性布局3）到弹性布局1中，此时会显示在弹性布局1的最右侧
拖拽按钮（新建，导入）到弹性布局2中
拖拽按钮和图片到弹性布局3中，注意弹性布局3内的元素希望是靠右侧显示，所以需要把弹性布局3的交叉轴对齐方式设置成 向终点对齐
上面的示例使用一个两端对齐的弹性布局嵌套了2个弹性布局，完成一个左侧和右侧分别有操作按钮组的示例。
行间距和列间距
行间距和列间距同样对于弹性布局来说，是很常用的功能，用于控制弹性布局中的元素之间的间距。
比如新建和导入按钮的间距太小，想加大一些，比如16px，选择弹性布局，在属性面板中，有2个属性，行间距和列间距
行间距：设置的是容器内，多行之间的间距。
当项目排列为水平排列（从左到右，从右到左）的情况下，项目换行为多行，此时行间距有意义
当项目排列为垂直排列（从上到下，从下到上）的情况下，行间距有意义
列间距：设置的容器内，多列之间的间距
当项目排列为水平排列（从左到右，从右到左）的情况下，列间距有意义
当项目排列为垂直排列（从上到下，从下到上）的情况下，项目换行为多行时，列间距有意义
下图示例中，新建和导入按钮，是从左到右水平排列成一行，2个按钮之间，就是列间距，设置列间距为16即可。
设置列间距为16px之后，2个按钮之间的间距就变成了16px。
注意，设置行间距，没效果，因为此时是单行，没有多行，所以设置行间距无效果。
活字格容器通用的属性，当内容超出容器的处理方式。大部分场景不需要设置此属性，因为通常在设计时，容器会显示出所有内容，遇到特殊情况时，需要考虑此属性。如下示例。
右上角的？图标和登录用户，使用了弹性布局，水平排列从左到右，交叉轴对齐方式是向终点对齐，以这到靠右侧显示的效果。
但是运行之后，点击 登录用户，并没有显示登录用户的下拉菜单，原因是因为登录用户的下拉菜单在容器中显示，受容器的大小限制，超出了容器区域，被剪切掉了。
在设计器中，选中弹性布局，把容器溢出模式，改成溢出，运行，点击登录用户，即可显示出来下拉菜单。
注意如果是弹性布局嵌套了弹性布局，需要一层层的弹性布局设置此模式，因为每一层的布局都会受到父容器设置的影响。
容器内的边距，左右上下，控制的是容器内部整体内容与容器的上，下，左，右的4边的边距。可以在设计器中设置看一下效果，此处就不详细介绍，此功能较简单。
在弹性布局放置单元格之后，单元格在弹性布局内的布局除了受弹性布局的设置影响以外，本身还可以设置布局相关的属性。我们通常一个场景，讲解最常用的几个配置
示例如下图，左下角的主表信息部分，拆解一下，包含2部分，标题文本“主表”，以及图文列表部分显示主表数据。如何实现下面简单的布局呢？
回到设计器，我们选择一片格子区域，合并之后，放置弹性布局
设置弹性布局，垂直排列，从上到下
然后拖拽文本到弹性布局中，设置文本为“主表”
拖拽图文列表到弹性布局中，设置图文列表的模板和数据源，保证图文列表有数据
效果图如下，和实现的效果，有些不同，不同点有哪些呢？
间距：弹性布局内的元素在容器内紧贴容器显示，并且主表文本与图文列表之间间距太小
图文列表的高度是固定高度，从实际结果图中，图文列表的高度期望能充满剩余的容器高度
接下来，我们优化一下。
设置弹性布局容器的内边距，所有边距设置为16px。
设置行间距，加大 文本和图文列表之间的间距，尤其是垂直排列，所以需要设置行间距，比如16px
接下来，是需要图文列表充满容器，选择图文列表，点击“项目在容器内的布局... ”。
对齐方式：通常使用默认，表示受父容器的对齐方式影响。
宽度：设置元素的宽度，需要注意父容器的对齐方式，如果是拉伸填充，可能此项会无效，具体查看上面的内容。（需要特别注意的一点是，当为空时，表示根据内容自适应，后面具体场景中介绍如何使用）
高度：设置元素的高度，需要注意父容器的对齐方式，如果是拉伸填充，可能此项会无效，具体查看上面的内容。（需要特别注意的一点是，当为空时，表示根据内容自适应，后面具体场景中介绍如何使用）
放大比例：表示的是，容器有剩余空间时，此元素占据剩余比率
缩小比例：表示的是，容器有剩余空间时，此元素占据剩余比率
外边距：单独针对此元素设置外边距，表示此元素和其他相邻元素的间距。
按照上面的需求，希望图文列表能占满容器的剩余空间，此时需要的设置的是放大比例：1，这里面的1表示占1份，当然此容器内只设置了图文列表占1，所以图文列表充满容器剩余空间。
能看到设置图文列表的高度充满整个容器的剩余空间。
运行之后，对比看一下效果，为了更好的看出对比效果，给容器设置了背景色。间距以及图文列表的高度都满足了需求。
自适应场景
还是上面的场景，图文列表在手机端，通常期望图文列表的高度是根据项目的多少，自动显示出所有的项目，当项目多的时候，浏览器出滚动条，滑动显示查看所有项目。这种自适应内容的场景，在实际页面中，也是常见的用例，如下效果图。
该如何实现此效果呢？回到设计器(我建了一个手机页面，设置了前面的内容)，我们继续修改设置。
选择图文列表，打开 项目在容器内的布局...对话框，此时不要设置放大或者缩小比例，而是将高度值清空，表示图文列表的高度根据项目的高度进行自适应。
运行查看效果，发现有几个问题，图文列表像是被剪切了，并且容器的大小也是固定的。
再次回到设计器，进行设置，选择弹性布局容器，设置溢出模式为溢出，为什么是溢出呢？是因为我们希望图文列表的所有项目全部显示出来，而不是在容器内滚动（当然如果需求是滚动，可以设置为滚动）。
运行查看效果，感觉离期望的目标又近了一步，但是还是有问题，就是图文列表确实在项目多的情况下，溢出显示了所有项目，但是会发现，容器（背景绿色区域）并没有自适应撑高，为什么呢？
因为活字格的的布局还是建立在格子上的，固定行和列，弹性布局容器大小所有的格子区域是固定大小。我们需要把弹性布局所在格子区域的高度，也设置成自适应即可，继续回到设计器。
选择弹性布局所在的任意一行，设置行高为自适应模式。
运行查看效果，在垂直方向上已经实现了期望的效果，在水平方向，发现左右还有一点空白，还是上面相同问题，容器所有的格子区域，是固定行高和列宽，我们只设置了行高的某行行高为自适应，列宽没有处理。
再次回到设计器，选择容器所在的任意一列，设置为范围模式，表示这一列的列宽占据剩余的宽度。
最后运行查看效果，已经和期望的结果一致。
关于格子布局的功能，可以查看格子下的布局功能介绍章节。
此章节根据实际的示例场景，分别讲解了容器的重要属性功能以及元素在容器内布局的重要属性。可以在活字格的设计器中尝试设置不同的属性，查看效果，加深弹性布局的理解。
