布局系统
本页解释 Zion UI 排版系统中的核心概念：盒子模型、定位、Flexbox 排版、溢出处理和网页端响应式断点。在编辑器中对应哪些分区、如何点选，见 设计面板参考。
盒子模型
用途：控制组件的物理边界与内外留白。
页面元素可类比为「带防震垫的纸箱」：
| 部分 | 说明 |
|---|---|
| 内容 | 实际展示（文字、图片等） |
| 尺寸 | 宽高的计算方式（见下表） |
| 内边距 | 边界与内容之间 |
| 外边距 | 与兄弟组件之间 |
尺寸计算方式
| 方式 | 说明 |
|---|---|
| 像素 | 固定大小，不参与弹性分配 |
| 适应 | 由内容撑开 |
| 百分比 (%) | 占父容器比例 |
| 份 | 在剩余空间中按比例分配 |
可设最大/最小宽高，避免极端屏幕下变形。
| 内边距 | 外边距 |
|---|---|
 |  |
定位
用途：决定组件是否参与父容器的正常排版，以及它相对谁确定位置。
| 类型 | 说明 |
|---|---|
| 相对定位 | 默认定位方式。组件仍在父容器的布局流中占位，并按父容器的 Flex 方向、对齐、间距等规则排列。 |
| 绝对定位 | 组件脱离父容器的正常布局流，不再挤占兄弟组件的位置；它的位置由相对父容器的偏移量决定。 |
| 固定定位 | 组件脱离页面滚动流，相对当前视口固定；页面滚动时仍停留在同一屏幕位置。 |
相对定位
相对定位适合绝大多数常规排版。组件会作为父容器中的一个子项，和兄弟组件一起参与 Flex 布局。
常见场景：
- 卡片里的标题、图片、按钮按顺序排列。
- 页面区域按上下结构或左右结构排布。
- 希望组件随父容器尺寸变化而自动调整位置。
绝对定位
绝对定位适合需要精确放在父容器某个位置的元素。它不会影响兄弟组件的排版，也不会为自己保留原本的布局空间。
常见场景：
- 在图片右上角放一个角标。
- 在卡片内部固定一个关闭按钮。
- 在某个容器内叠放一个装饰图层。
使用绝对定位时，重点关注两个问题：
| 问题 | 说明 |
|---|---|
| 相对谁定位 | 通常相对直接父容器。 |
| 是否还占位 | 不占位，兄弟组件会像它不存在一样继续排版。 |
固定定位
固定定位适合需要跟随视口停留的元素。它不跟随页面内容一起滚动。
常见场景：
- 吸顶导航。
- 悬浮客服按钮。
- 固定在屏幕底部的操作栏。
固定定位与绝对定位都可以设置偏移，但参考对象不同：绝对定位参考父容器，固定定位参考视口。
层级、Z-index 与偏移字段见 设计面板参考 · 位置。
Flexbox 排版逻辑
用途：容器内子组件的方向、对齐与间距。
页面与视图等容器具备布局能力；相对定位的子组件按下列规则排列。
方向
| 方向 | 说明 |
|---|---|
| 水平 | 子组件沿横轴排列 |
| 垂直 | 子组件沿纵轴排列 |
分布和对齐
| 分布方式 | 说明 |
|---|---|
| 聚合 | 子组件聚在一侧 |
| 间隔分布 | 间距相等，首尾贴边 |
| 均匀分布 | 间距相等，含与容器两端间距 |
| 环绕分布 | 组件两侧等距；两端空隙通常小于组件间距 |
换行
当一行（列）放不下时，可折到下一行（列）。
间隔
统一设置相邻子组件间距。
溢出
| 模式 | 说明 |
|---|---|
| 滚动 | 超出时出现滚动条 |
| 可见 | 超出仍可见 |
| 隐藏 | 裁剪超出部分 |
未开启换行时，可分别控制水平、垂直方向溢出。
响应式断点
网页端支持桌面、平板、手机三个断点。断点用于让同一个网页客户端在不同视口宽度下使用不同的位置、尺寸、布局和样式配置。
桌面是网页端主断点。平板和手机都直接继承桌面配置；平板和手机是同级断点，二者之间没有继承关系。你在平板断点上的修改只影响平板，在手机断点上的修改只影响手机。
断点只属于网页端。微信小程序和 App 是独立客户端，不是网页端手机断点，也不会继承网页端 UI。
适合按断点调整的内容包括：
| 配置 | 示例 |
|---|---|
| 位置 | 手机端调整悬浮按钮位置。 |
| 尺寸 | 桌面端卡片固定宽度，手机端改为全宽。 |
| 布局 | 桌面端横排，手机端纵排。 |
| 样式 | 某个装饰组件只在手机端隐藏。 |
断点宽度、复写字段和隐藏规则见 断点规格参考。
相关阅读
Last updated on