外观
Auto Layout 与约束
手动拖坐标，加一个元素就全乱；Auto Layout 让容器记住规则，加多少都不乱。差别不在"排得认不认真"，而在你是在记坐标，还是在记规则。
问题：手动拖坐标，加一个元素就全乱
想象你在 Penpot 里排一列微信消息。你手动拖坐标：第一条在 y=100，第二条在 y=150，第三条在 y=200……排好了。这时要做两件很常见的事，就全乱了：
- 在第一条上面加一个新消息——下面所有坐标全要重新拖一遍。
- 把某条的昵称改长一点——文字挤在一起、错位。
这种"手动拖坐标"的方式，问题就在每加一个元素，所有坐标都要手动重排。界面不是静止的，它一直在变：加数据、删数据、改文字。只要靠手，改一下就全乱。
坐标是"结果"，不是"原因"——手动记坐标，加一个元素下面全要重拖。
核心：让容器自动排列
专业做法是换一个思路：让一个容器自动管里面所有子元素。在 Penpot 里它叫 Auto Layout（自动布局，底层是 flex layout）。你只要设几个属性，子元素就自动排得整整齐齐：
| 属性 | 作用 |
|---|---|
| 方向 direction | 子元素横着排还是竖着排 |
| 间距 gap | 子元素之间的距离 |
| 内边距 padding | 容器边缘留出的空隙 |
| 对齐 align | 子元素在横竖方向怎么对齐 |
之后加一个、删一个、改大小，其他元素自动跟着走，不再乱。你不再管"每个元素在哪"，只管"这套规则是什么"。
Auto Layout 四个属性：方向 direction · 间距 gap · 内边距 padding · 对齐 align。
自适应：容器随内容自动伸缩
Auto Layout 的容器还能随内容自动伸缩。你往里面加一行文字，容器自动"撑开"变高；删掉一行，自动"缩回去"。不用手动调容器大小——这就是它依赖 08 间距体系和 09 对齐的地方：间距定了节奏，对齐让自动排出来的队在一条线上。
容器有两种"松散程度"，决定子元素怎么占空间：
| 模式 | 含义 | 例子 |
|---|---|---|
| fix（固定） | 子元素保持自己的固定大小，容器按内容多少自动伸缩 | 聊天气泡：内容多变高、内容少变矮 |
| fill（填满） | 子元素拉伸填满容器里剩下的空间 | 消息预览文字：吃掉剩余宽度，对齐到右边缘 |
规则一句话：内容决定大小的用 fix，要占满剩余空间的用 fill。
为什么加一个元素不乱：坐标是结果，规则是原因
Auto Layout 不是"记死每个元素的坐标"，而是记住一套规则（方向 / 间距 / 对齐）。元素来了，规则自动把它排进队里。坐标是"结果"，规则是"原因"——你改的是原因，结果自动跟着变。
这也正是设计系统组件的基石：按钮、卡片、列表项都用 Auto Layout 做底层，因为改规则不用改每个零件。组件做成响应式、复用一致，靠的就是这套"规则驱动"而不是"坐标驱动"。
坐标是结果，规则是原因——改原因，结果自动变。
微信案例：消息列表与气泡
消息列表与气泡的参数：
| 容器 | 方向 | gap | 内边距 | 圆角 | 子元素 |
|---|---|---|---|---|---|
| 消息列表 | 纵向 | 16（--space-md） | 上下 12、左右 16 | — | 消息项（气泡） |
| 聊天气泡 | 纵向 | 8 | 上下 12、左右 16 | 12 | 一行/多行文字 |
微信首页的消息列表就是一条纵向 Auto Layout 容器——每条消息是一个子项，间隙统一 16px（--space-md），上下对齐。你删掉一条对话，下面所有对话自动上移一格，不留空洞。这就是"加一个元素不乱"的实战效果。
重建一个聊天气泡：容器方向纵向、gap=8，内边距上下 12、左右 16，圆角 12。放进一行文字，文字多时容器自动变高、自动换行；再放第二行，两行自动按 gap=8 排好。把气泡放进消息列表容器，所有气泡自动纵向排列。
消息列表 gap=16（--space-md）；气泡 gap=8、内边距 12/16、圆角 12。
深度
边界：Auto Layout 是"排布工具"，不是"避坑器"。 它让"间距 / 对齐"自动生效，但"该用多少间距、怎么分组"的判断，仍来自 08 间距体系和 09 对齐与亲密性。间距还是要用 8pt 的 Token（别设 13px 这种杂数），分组逻辑还是要按 09 来。引入本知识点前，先掌握 08、09。
实例：重建微信聊天气泡的完整步骤。
- 新建一个容器，开启 Auto Layout，方向纵向，gap=8。
- 设成"气泡"：内边距 12（上下）+ 16（左右），圆角 12。
- 放一行文字（对方消息），文字多时容器自动变高、自动换行。
- 再放一行文字（第二句），两行自动按 gap=8 排好。
- 把气泡容器放进消息列表容器，所有气泡自动纵向排列。
做完你会发现：改一条消息的字数，气泡自动撑高，其他气泡自动让位、往下挪——完全不用手动拖。
一个手机画面里的分工：头像和名字用 fix（保持固定大小），"最新消息"那一行文字用 fill（占满剩余宽度），这样无论屏幕多宽都能对齐到右边缘。
误区
| 误解 | 正解 |
|---|---|
| 用坐标手动排最靠谱 | 坐标是结果不是原因，加个元素就全乱；Auto Layout 改规则、结果自动变 |
| Auto Layout 是给开发用的 | 不只是。设计师在 Penpot / Figma 里开 Auto Layout 建组件、做响应式是标配 |
| Auto Layout 会自动解决所有布局问题 | 它只自动执行你设的规则；间距 / 对齐 / 分组还靠 08、09 |
| 开了 Auto Layout 就不用管间距了 | 间距还要用 8pt 的 Token，别设 13 / 17 这种杂数 |
| Auto Layout 只能排横或竖排直线 | 它可以换行、嵌套（容器套容器），微信气泡就是嵌套 Auto Layout 的产物 |
练习
即时题 小明在 Penpot 里手动把 5 条微信消息分别拖到 y=100、150、200、250、300。现在他要往上加一条新消息。请说出：他接下来会遇到什么麻烦？如果用 Auto Layout（方向纵向、gap=16）来做，加这条消息时会有什么不同？
答案
手动做法：下面 5 条坐标全要重拖一遍，加完还可能对不齐。Auto Layout：只加这一条，其余 5 条自动整齐下移、间距保持 16px，不用动任何坐标。模块题 用 Auto Layout 设计一个"微信消息气泡"：外层是纵向列表容器（gap=16），里面是若干气泡。请说明：① 气泡容器和列表容器各自的方向、gap、padding 应该怎么设；② 气泡里的文字该用 fix 还是 fill，为什么；③ 如果某条消息特别长，气泡和列表会分别发生什么（用 auto-sizing 解释）。
参考思路
① 都是纵向，气泡 gap=8、padding 上下 12 左右 16，列表 gap=16。② 一行昵称用 fix（固定大小），较长的消息预览文字用 fill（占满剩余宽度，对齐右边缘）。③ 消息变长时，气泡容器自动撑高（auto-sizing），列表面板随之增高、不让位也不挤压，其他气泡保持原始间距往下排。迷你案例：用 Auto Layout 重建微信消息列表。 在 Penpot 新建一个 375×812 的画板：
- 画一个容器，开启 Auto Layout，方向纵向，gap=16（
--space-md）。 - 设内边距左右 16、上下 12。
- 在里面放一个"消息项"容器（也是 Auto Layout），方向纵向，gap=8。
- 消息项里放：昵称（fix）+ 最新消息预览（fill，占满剩余宽度）。
- 复制 8 个消息项，让它们自动排进列表容器。
- 删掉其中一条——看剩下的是不是自动整齐上移，不留空洞。
- 把某条预览文字改长——看容器是否自动撑高、不挤压别条。
做完你会理解，为什么 Auto Layout 是"重建微信界面"的关键工具，也是设计系统组件的基石。
素材
- 👉 打开交互演示：Auto Layout — 手动拖坐标 vs 自动布局并排对比，加新消息点一下看谁先乱；再拖 gap / padding 滑块、切方向与对齐，实时看子元素怎么跟着变
- Penpot 官方文档：Auto Layout（Flex Layout）章节（penpot.app 帮助中心，权威操作步骤）。
- Figma Auto Layout：Figma 官方视频教程（同样的概念，界面稍不同）。
- 概念原理：搜索 "flexbox explained"（MDN Web Docs，讲透方向 / 间距 / 对齐的原理）。
- 视频演示：搜索 "Figma auto layout tutorial"（YouTube，直观演示容器自动排列）。
- 后续衔接：本知识点依赖 08 间距体系（gap / padding 用 8pt Token）和 09 对齐与亲密性（子元素对齐、分组），是重建微信界面与设计系统组件的基石。