加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai全局样式布局

布局

布局是网站排版布局的基本组成元素,MooKwai 提供了一套功能强大且使用自由的布局系统,可实现更丰富的排版形式。同时在不同设备的响应适配时,MooKwai 的布局系统还提供了更方便快捷的适配解决方案。

文章目录

“布局容器”与“布局元素”区块

布局容器与布局元素是 MooKwai 内置的特色区块。要在页面中使用全局样式中的布局系统,需要在页面中插入 “布局容器” 区块。在布局中选择的不同类型的布局,将直接影响到内部“布局元素”的配置选项。详细的配置请查看特色区块中的 “布局容器 / 布局元素”。

5种类型

MooKwai 提供了5种类型的布局,可根据需求选择合适的类型,以完成不同的布局需求。

  1. 普通布局:普通布局仅设定了布局容器的最大宽度、侧边间距与位置等基础信息。布局内的布局元素无配置选项。
  2. 弹性布局:Flex 布局形式。
  3. 列:Grid 布局形式,为经典的列布局形式,可将布局水平方向平分为多个小列,此布局中布局元素可设置所占据的列数量以及偏移列数量。
  4. 单元格:Grid 布局形式,在列布局形式上增加了行的概念,可将布局元素在此布局中任意选择排列方式。
  5. 列表:Grid 布局形式,通常用于卡片式/单元格形式列表内容。

配置选项

不同类型的布局形式拥有不同的配置属性

通用选项

自定义名称 (必填)

String 可输入任意字符,方便您进行识别。

类型 (必填)

Select 选择布局类型。

最大宽度

Number | [auto] 0 – 10000 之间的任意整数数值。设置布局的最大宽度,如视窗宽度低于最大宽度则根据视窗宽度进行缩放,如视窗宽度大于最大宽度,则始终保持设定最大宽度的固定数值。如不设置或设置为 auto 则始终跟随视窗宽度的变化进行缩放。

位置 (必填)

Select 设置布局的对齐方式,在设置最大宽度后有效。

侧边间距

Number 0 – 10000 之间的任意整数数值。布局与视窗左右两侧的安全距离。

侧边间距(移动端)

Number 0 – 10000 之间的任意整数数值。在移动端下,布局与视窗左右两侧的安全距离。如设置后,移动端将以设置的固定数值保持两侧的间距。不设置将沿用桌面端设置的侧边间距。

侧边间距缩放

Boolean 勾选后,侧边间距将按照 MooKwai 的间距适配规则进行调整,如禁用则始终保持设置的固定数值。

侧边间距缩放(大屏)

Boolean 勾选后,视窗尺寸为大屏或以上,将一直进行缩放,禁用则保持固定数值。

弹性布局

垂直间距

Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的水平间距。

垂直间距(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的水平间距,间距将以设置的固定数值保持元素之间的间距。

水平间距

Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的垂直间距。

水平间距(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的垂直间距,间距将以设置的固定数值保持元素之间的间距。

间距缩放

Boolean 布局内的布局元素之间的水平间距与垂直间距是否根据 MooKwai 的间距缩放规则进行缩放,如不勾选,间距将以设置的固定数值保持元素之间的间距。

间距缩放(大屏)

Boolean 在大屏或以上尺寸下,布局内的布局元素之间的水平间距与垂直间距是否进行缩放。

主轴

Select 设置 Flex 布局中的主轴方向,详细说明可参考 flex-direction 属性

主轴对齐

Select 主轴对齐方式,详细说明可参考 justify-content 属性

交叉轴对齐

Select 交叉轴对齐方式,详细说明可参考 align-items 属性

是否换行

Select Flex 布局内子元素单行显示还是多行显示。如果允许换行,这个属性允许你控制行的堆叠方向。详细说明可参考 flex-wrap 属性

列数量 (必填)

Number 0 – 48 之间的任意整数数值。将布局平分为多少列。

列数量(移动端) (必填)

Number 0 – 48 之间的任意整数数值。移动端中将布局平分为多少列。

垂直间距

Number 0 – 10000 之间的任意整数数值。每列之间的水平间距。

垂直间距(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中每列之间的水平间距,将以设定的固定数值显示。

间距缩放

Boolean 列之间的水平间距是否根据 MooKwai 的间距缩放规则进行缩放,如不勾选,间距将以设置的固定数值保持列之间的间距。

间距缩放(大屏)

Boolean 在大屏或以上尺寸下,列之间的水平间距是否进行缩放。

单元格

每行网格数

Number 0 – 48 之间的任意整数数值。设置每行网格数量。

每行网格数(移动端)

Number 0 – 48 之间的任意整数数值。设置移动端每行网格数量。

网格高度

Number | String 0 – 10000 之间的任意整数数值,支持特殊字符 “auto”, “1fr”。设置每行网格的高度。不设置则默认为 “auto”。

网格高度(移动端)

Number | String 0 – 10000 之间的任意整数数值,支持特殊字符 “auto”, “1fr”。设置每行网格的高度。不设置则默认为 “auto”。

垂直间距

Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的水平间距。

垂直间距(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的水平间距,间距将以设置的固定数值保持元素之间的间距。

水平间距

Number 0 – 10000 之间的任意整数数值。设定布局内的布局元素之间的垂直间距。

水平间距(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中布局内的布局元素之间的垂直间距,间距将以设置的固定数值保持元素之间的间距。

间距缩放

Boolean 布局内的布局元素之间的水平间距与垂直间距是否根据 MooKwai 的间距缩放规则进行缩放,如不勾选,间距将以设置的固定数值保持元素之间的间距。

间距缩放(大屏)

Boolean 在大屏或以上尺寸下,布局内的布局元素之间的水平间距与垂直间距是否进行缩放。

列表

元素最小宽度 (必填)

Number 0 – 10000 之间的任意整数数值。布局元素的最小宽度。

元素最小宽度(平板)

Number 0 – 10000 之间的任意整数数值。平板电脑中布局元素的最小宽度。

元素最小宽度(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中布局元素的最小宽度。

水平间距

Number 0 – 10000 之间的任意整数数值。布局元素之间的水平间距。

水平间距(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中布局元素之间的水平间距。

垂直间距

Number 0 – 10000 之间的任意整数数值。布局元素之间的垂直间距。

垂直间距(移动端)

Number 0 – 10000 之间的任意整数数值。移动端中布局元素之间的垂直间距。

间距缩放

Boolean 布局内的布局元素之间的水平间距与垂直间距是否根据 MooKwai 的间距缩放规则进行缩放,如不勾选,间距将以设置的固定数值保持元素之间的间距。

间距缩放(大屏)

Boolean 在大屏或以上尺寸下,布局内的布局元素之间的水平间距与垂直间距是否进行缩放。

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧