“布局容器”与“布局元素”区块
布局容器与布局元素是 MooKwai 内置的特色区块。要在页面中使用全局样式中的布局系统，需要在页面中插入 “布局容器” 区块。在布局中选择的不同类型的布局，将直接影响到内部“布局元素”的配置选项。详细的配置请查看特色区块中的 “布局容器 / 布局元素”。
5种类型
MooKwai 提供了5种类型的布局，可根据需求选择合适的类型，以完成不同的布局需求。
- 普通布局：普通布局仅设定了布局容器的最大宽度、侧边间距与位置等基础信息。布局内的布局元素无配置选项。
- 弹性布局：Flex 布局形式。
- 列：Grid 布局形式，为经典的列布局形式，可将布局水平方向平分为多个小列，此布局中布局元素可设置所占据的列数量以及偏移列数量。
- 单元格：Grid 布局形式，在列布局形式上增加了行的概念，可将布局元素在此布局中任意选择排列方式。
- 列表：Grid 布局形式，通常用于卡片式/单元格形式列表内容。
配置选项
不同类型的布局形式拥有不同的配置属性
通用选项
自定义名称 (必填)
String 可输入任意字符，方便您进行识别。
类型 (必填)
Select 选择布局类型。
最大宽度
Number | [auto] 0 – 10000 之间的任意整数数值。设置布局的最大宽度，如视窗宽度低于最大宽度则根据视窗宽度进行缩放，如视窗宽度大于最大宽度，则始终保持设定最大宽度的固定数值。如不设置或设置为 auto 则始终跟随视窗宽度的变化进行缩放。
位置 (必填)
Select 设置布局的对齐方式，在设置最大宽度后有效。
侧边间距
Number 0 – 10000 之间的任意整数数值。布局与视窗左右两侧的安全距离。
侧边间距(sm)
Number 0 – 10000 之间的任意整数数值。在移动端下，布局与视窗左右两侧的安全距离。如设置后，移动端将以设置的固定数值保持两侧的间距。不设置将沿用桌面端设置的侧边间距。
侧边间距缩放
Boolean 勾选后，侧边间距将按照 MooKwai 的间距适配规则进行调整，如禁用则始终保持设置的固定数值。
侧边间距缩放(lg)
Boolean 勾选后，视窗尺寸为大屏或以上，将一直进行缩放，禁用则保持固定数值。
弹性布局
列间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的水平间距。
列间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的水平间距，间距将以设置的固定数值保持元素之间的间距。
行间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的垂直间距。
行间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的垂直间距，间距将以设置的固定数值保持元素之间的间距。
间隙缩放
Boolean 布局内的布局元素之间的水平间距与垂直间距是否根据 MooKwai 的间距缩放规则进行缩放，如不勾选，间距将以设置的固定数值保持元素之间的间距。
间隙缩放(lg)
Boolean 在大屏或以上尺寸下，布局内的布局元素之间的水平间距与垂直间距是否进行缩放。
主轴
Select 设置 Flex 布局中的主轴方向，详细说明可参考 flex-direction 属性。
主轴对齐
Select 主轴对齐方式，详细说明可参考 justify-content 属性。
交叉轴对齐
Select 交叉轴对齐方式，详细说明可参考 align-items 属性。
是否换行
Select Flex 布局内子元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。详细说明可参考 flex-wrap 属性。
列
列数量 (必填)
Number 0 – 48 之间的任意整数数值。将布局平分为多少列。
列数量(sm) (必填)
Number 0 – 48 之间的任意整数数值。移动端中将布局平分为多少列。
列间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的水平间距。
列间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的水平间距，间距将以设置的固定数值保持元素之间的间距。
行间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的垂直间距。
行间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的垂直间距，间距将以设置的固定数值保持元素之间的间距。
间隙缩放
Boolean 列之间的水平间距是否根据 MooKwai 的间距缩放规则进行缩放，如不勾选，间距将以设置的固定数值保持列之间的间距。
间隙缩放(lg)
Boolean 在大屏或以上尺寸下，列之间的水平间距是否进行缩放。
单元格
每行网格数
Number 0 – 48 之间的任意整数数值。设置每行网格数量。
每行网格数(sm)
Number 0 – 48 之间的任意整数数值。设置移动端每行网格数量。
网格高度
Number | String 0 – 10000 之间的任意整数数值，支持特殊字符 “auto”, “1fr”。设置每行网格的高度。不设置则默认为 “auto”。
网格高度(sm)
Number | String 0 – 10000 之间的任意整数数值，支持特殊字符 “auto”, “1fr”。设置每行网格的高度。不设置则默认为 “auto”。
列间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的水平间距。
列间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的水平间距，间距将以设置的固定数值保持元素之间的间距。
行间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的垂直间距。
行间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的垂直间距，间距将以设置的固定数值保持元素之间的间距。
间隙缩放
Boolean 布局内的布局元素之间的水平间距与垂直间距是否根据 MooKwai 的间距缩放规则进行缩放，如不勾选，间距将以设置的固定数值保持元素之间的间距。
间隙缩放(lg)
Boolean 在大屏或以上尺寸下，布局内的布局元素之间的水平间距与垂直间距是否进行缩放。
列表
元素最小宽度 (必填)
Number 0 – 10000 之间的任意整数数值。布局元素的最小宽度。
元素最小宽度(md)
Number 0 – 10000 之间的任意整数数值。平板电脑中布局元素的最小宽度。
元素最小宽度(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局元素的最小宽度。
列间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的水平间距。
列间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的水平间距，间距将以设置的固定数值保持元素之间的间距。
行间隙
Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的垂直间距。
行间隙(sm)
Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的垂直间距，间距将以设置的固定数值保持元素之间的间距。
间隙缩放
Boolean 布局内的布局元素之间的水平间距与垂直间距是否根据 MooKwai 的间距缩放规则进行缩放，如不勾选，间距将以设置的固定数值保持元素之间的间距。
间隙缩放(lg)
Boolean 在大屏或以上尺寸下，布局内的布局元素之间的水平间距与垂直间距是否进行缩放。
