弹性布局

弹性布局是一种布局容器，在容器内可以对子项目进行灵活的排列和对齐，动态分配空间，适应不同的屏幕尺寸和设备。

弹性布局容器可应用于导航栏、卡片布局、表单设计等场景，通过灵活的单元格类型和对齐方式，轻松实现复杂的布局需求。它的主要优势在于：

响应式设计：适应不同屏幕尺寸。
简化代码：减少对浮动和定位的依赖。
高效布局：快速实现复杂的排列和对齐。

设置弹性布局容器

选中弹性布局容器，在属性设置区中选择“单元格设置”标签页，设置说明见下表。

设置	说明
项目排列方向	水平排列：从左到右水平排列：从右到左垂直排列：从上到下垂直排列：从下到上
项目换行	不换行换行换行且顺序反转
项目在主轴的对齐方式	主轴是弹性布局容器中项目排列的主要轴线。它是弹性布局容器内定义的一条虚拟直线，项目会沿着这条线进行排列。向主轴起点对齐（flex-start）向主轴终点对齐（flex-end）居中对齐（center）均匀分布，两端对齐不留白（space-between）均匀分布，两端留有项目间隔一半的空间（space-around）均匀分布，每个项目之间的间隔相等（space-evenly）
单行在交叉轴的对齐方式	交叉轴是与主轴垂直的轴线，它与主轴共同构成了弹性布局的二维空间。在确定了主轴方向后，交叉轴的方向也就随之确定。向交叉轴起点对齐（flex-start）向交叉轴终点对齐（flex-end）在交叉轴上居中对齐（center）拉伸以填充容器
多行在交叉轴的对齐方式	当项目换行选择“换行”时，可以设置此项。包括：向交叉轴起点对齐（flex-start）向交叉轴终点对齐（flex-end）在交叉轴居中对齐（center）均匀分布，两端对齐不留白（space-between）均匀分布，两端留有项目间隔一半的空间（space-around）均匀分布，每个项目之间的间隔相等（space-evenly）拉伸以填满交叉轴的剩余空间（stretch）
行间距	设置容器中项目的行间距，默认为8，单位为像素。
列间距	设置容器中项目的列间距，默认为8，单位为像素。
容器溢出模式	溢出：容器会扩展直至能够完全显示所有项目。滚动：容器中出现滚动条。剪切：超出容器的项目会被裁减，不显示出来。
容器内边距	设置容器的内边距，包括左、上、右、下，单位为像素。可设置“全部”，快速设置四个方向的内边距。
禁用	设置是否禁用弹性布局容器。勾选“禁用”后，容器内的所有项目均不可以点击，且文字颜色会变灰。
不可见	设置是否隐藏弹性布局容器。勾选“不可见”后，容器将被隐藏。
注释	弹性布局容器单元格的注释，具体可参见单元格基本操作的“新建注释”。

容器的右键菜单

选中弹性布局容器，右击，在右键菜单中可进行如下的操作：

操作弹性布局容器

放置项目

在单元格类型列表中，选择一个，将其拖拽到弹性布局容器中。

项目在容器内的布局

选择一个项目，在右侧的单元格设置中，单击“项目在容器内的布局”超链接，打开如下的对话框。

设置	说明
对齐方式（align-self）	设置选择项目的对齐方式，默认值为“默认（auto）”，表示继承弹性布局容器的的对齐方式。可设置与其容器不同的对齐方式。向交叉轴起点对齐（flex-start）向交叉轴终点对齐（flex-end）在交叉轴上居中对齐（center）拉伸以填充容器
放大比例（flex-grow）	设置项目的放大比例，默认值为0，即如果有剩余空间，不会放大项目。
缩小比例（flex-shrink）	设置项目的缩小比例，默认值为0，即如果空间不足，不会缩小项目。
宽度（像素）	设置当前项目的宽度。
高度（像素）	设置当前项目的高度。
外边距（像素）	设置项目的外边距，包括左、上、右、下，单位为像素。可设置“全部”，快速设置四个方向的外边距。
项目容器的CSS类名	设置运行时包裹当前项目的 div 的 CSS 类名，以调整项目容器的外观。具体可参见使用CSS。