布局系统

本页解释 Zion UI 排版系统中的核心概念：盒子模型、定位、Flexbox 排版、溢出处理和 Web 应用响应式断点。在编辑器中对应哪些分区、如何点选，见 设计面板参考。

盒子模型

用途：控制组件的物理边界与内外留白。

页面元素可类比为「带防震垫的纸箱」：

尺寸计算方式

可设最大/最小宽高，避免极端屏幕下变形。

内边距	外边距

定位

用途：决定组件是否参与父容器的正常排版，以及它相对谁确定位置。

相对定位

相对定位适合绝大多数常规排版。组件会作为父容器中的一个子项，和兄弟组件一起参与 Flex 布局。

常见场景：

• 卡片里的标题、图片、按钮按顺序排列。
• 页面区域按上下结构或左右结构排布。
• 希望组件随父容器尺寸变化而自动调整位置。

绝对定位

绝对定位适合需要精确放在父容器某个位置的元素。它不会影响兄弟组件的排版，也不会为自己保留原本的布局空间。

常见场景：

• 在图片右上角放一个角标。
• 在卡片内部固定一个关闭按钮。
• 在某个容器内叠放一个装饰图层。

使用绝对定位时，重点关注两个问题：

固定定位

固定定位适合需要跟随视口停留的元素。它不跟随页面内容一起滚动。

常见场景：

• 吸顶导航。
• 悬浮客服按钮。
• 固定在屏幕底部的操作栏。

固定定位与绝对定位都可以设置偏移，但参考对象不同：绝对定位参考父容器，固定定位参考视口。

固定定位只对直接放在页面下的组件开放；放在视图等容器里的组件，定位类型里不会出现「固定」。需要在容器内部实现吸附效果时，用下面的粘性定位。

粘性定位

粘性定位介于相对定位和固定定位之间：组件平时像相对定位一样占位、跟着内容一起滚动；当它随滚动快要离开所在滚动容器的某条边时，就吸附在这条边上，直到父容器整体滚出可视区域才一起离开。

常见场景：

• 长列表的分组标题，滚到顶部时停住，被下一组标题顶走。
• 页面内容区的筛选栏，滚过去之后一直贴在顶部。
• 详情页底部的购买栏，先在内容末尾正常显示，内容更长时则吸在底部。

配置步骤：

1. 准备一个会滚动的容器：新建一个视图，高度设为固定像素值，「Y 轴溢出」选「滚动」，把标题栏和下方内容都放进去。
2. 选中要吸附的组件，「位置 · 类型」选「粘性」。
3. 用四向偏移选择吸附的边并填距离：上、下、左、右可各选一个方向，常用的是只选「上」或只选「下」，距离 0 表示贴着容器边缘。
4. 把它的「层级」设为大于后面兄弟组件的值，例如 1。

粘性定位和固定定位都能做出「吸顶」效果，区别在于：固定定位从一开始就脱离内容、钉在视口上；粘性定位先随内容滚动，到位后才吸附，并且会被父容器的边界限制。页面级的导航栏、底部操作栏用固定定位，内容区内部的分组标题、筛选栏用粘性定位。

层级、Z-index 与偏移字段见 设计面板参考 · 位置。

Flexbox 排版逻辑

用途：容器内子组件的方向、对齐与间距。

页面与视图等容器具备布局能力；相对定位的子组件按下列规则排列。

方向

分布和对齐

换行

当一行（列）放不下时，可折到下一行（列）。

间隔

统一设置相邻子组件间距。

溢出

未开启换行时，可分别控制水平、垂直方向溢出。

响应式断点

Web 应用支持桌面、平板、手机三个断点。断点用于让同一个 Web 应用在不同视口宽度下使用不同的位置、尺寸、布局和样式配置。

桌面是 Web 应用主断点。平板和手机都直接继承桌面配置；平板和手机是同级断点，二者之间没有继承关系。你在平板断点上的修改只影响平板，在手机断点上的修改只影响手机。

断点只属于 Web 应用。微信小程序和移动应用是独立客户端，不是 Web 应用的手机断点，也不会继承 Web 应用 UI。

适合按断点调整的内容包括：

断点宽度、复写字段和隐藏规则见 断点规格参考。

相关阅读

• UI 组织方式 — 客户端、页面、组件树与组合模式
• 断点规格参考
• 设计面板参考
• 搭建第一个页面