页面布局类型（布局组件）

新建PC页面时，可选择「流式布局页面」（默认）或「栅格布局页面」

流式布局页面

简介

• 流式布局页面，是基于 “容器组件” 核心能力构建的灵活布局方案，它通过预设布局规则简化页面结构设计，无需手动计算元素位置，即可实现各类子元素的有序排列。
• 流式布局页面，支持「Block 布局」和 「Flex 布局」两种配置模式，既能满足简单的垂直堆叠需求，也能适配复杂对齐、响应式适配等高级布局场景。

功能描述

Block 布局（块级布局）：

• 布局特点： 子元素按添加顺序自上而下垂直堆叠，每个子元素独占一行，默认宽度占满容器，高度由自身内容决定，无需手动设置宽度。
• 关键配置：（在容器中时）支持设置 “溢出规则”，当子元素超出容器范围时，可选择 “直接截断” 或 “显示滚动条”；同时可配置容器尺寸、间距、边框、背景等基础样式。

Flex 布局（弹性布局）：

• 布局特点： 支持自定义主轴方向（水平 / 垂直 / 换行），子元素沿主轴排列，可通过弹性规则实现自适应调整，适配一维布局的复杂需求。
• 关键配置：
  • 布局方向：支持水平（从左往右）、垂直（从上往下）、换行（从左往右且自动换行）三种方向；
  • 网格间距：可自定义子元素之间的横向 / 纵向间距（单位：PX）；
  • 主轴对齐：控制与布局方向同向的对齐方式（如水平方向左对齐、居中、右对齐、均匀分布等）；
  • 交叉轴对齐：控制与布局方向垂直的对齐方式（如垂直方向上对齐、居中、下对齐等）；
  • 多行布局：当选择 “换行” 布局方向时，可配置垂直方向的对齐规则，确保多行元素的规整排列；
  • 扩展配置：支持溢出规则（截断 / 滚动）

详细场景示意

查看「容器组件 (opens new window)」

栅格布局页面

简介

• 栅格布局页面，是基于固定栅格系统的规范化布局方案，组件在画布中以 “栅格宽度” 为基础单位进行排列。
• 栅格布局页面的特点是通过统一配置行列间距和默认行高，实现页面元素的规整化分布，强调布局的一致性和对称性，适合需要严格遵循网格规范的页面设计场景。

功能描述

• 布局特点： 栅格布局页面被划分为固定数量的列网格，每个页面组件的尺寸均由「列 x 行」组成，组件需占用指定数量的栅格列来定义宽度、占用指定的行数来定义高度。—— 可以理解为栅格画布中【组件宽度 = 组件列数】、【组件高度 = 组件行数 x 行高】
  • 同时，还可以通过控制“行高、行间距与列间距”，调整画布中组件之间间距分布。
• 关键配置：
  • 默认行高： 可统一设置页面中每行的基础高度（单位：PX），组件可以拖拽改变占用的行数
  • 列间距： 配置栅格列与列之间的固定间距（单位：PX），确保组件横向间距的一致性；
  • 行间距： 配置行与行之间的固定间距（单位：PX）