Auto Layout 的排布规则
Auto Layout 描述子项如何排布。它最有价值的地方，是把“这些对象为什么保持这种关系”存进文件，而不是只留下坐标。
先选择流向，再设置尺寸
当前 Figma 支持 Horizontal、Vertical 和 Grid。主线先用纵向屏幕、横向信息栏和卡牌行学习；Grid 留作棋盘排布的替换练习。Wrap 允许一条流换行，它与明确行列的 Grid 是不同模型。
Game：Vertical，左右 padding 24，gap 20
├─ Header：Horizontal，Space between
├─ Status：Horizontal，gap 12
├─ Board：Vertical，gap 12
│ ├─ Row 01：Horizontal，gap 12
│ ├─ Row 02：Horizontal，gap 12
│ └─ Row 03 / Row 04
└─ Help：Vertical，gap 12
先保证层级正确，再给子项设置 Fill 或 Hug。对一个不是 Auto Layout 子项的对象提出 Fill container，通常意味着父子模型还没理清。
排布中最重要的四个参数
Padding 是父容器边缘到内容的留白；Gap 是相邻子项之间的间隔；主轴对齐 决定内容沿流向如何分配；交叉轴对齐 决定另一方向如何靠齐。
例如 Header 的主轴为水平，Space between 让左右对象分居两端；它不等于在每个按钮上手工添加不同的 x。若使用 Space between，剩余空间参与分配，固定 gap 不再是最终可见间距的唯一来源。
浏览器原理演示 · 映射 Auto Layout 的尺寸意图
Fill 跟随父容器剩余空间；Hug 跟随内容。这里的网页示意不代表 Figma 实际尺寸读取。
实操：可增长的按钮
建立按钮 Frame，开启 Horizontal Auto Layout；左右 padding 24，上下 padding 16；添加文字，水平和垂直居中。先让按钮 Hug，观察文案变长后按钮增长；再把按钮放进纵向面板并设为宽 Fill，观察宽度改由父容器提供。
不要在自动布局流内拖动对象来“微调位置”。若必须做偏移，先判断是否应该调整对齐、padding、父容器，或者确实属于脱离流的装饰。
请把 Header 改为水平 Auto Layout，左右对象使用 Space between。
先读取现有层级；保留原节点及交互。报告主轴、交叉轴、padding、gap 和子项尺寸模式。
修改后将屏幕宽度临时改为 360，截图验证，再恢复基准尺寸。
练习与检查
给状态栏增加一个更长的数字，看它是否挤压另一项。指出问题来自文字尺寸、父容器分配还是过小的可用宽度。不要以“全部缩小字号”作为默认修正。
依据：Auto Layout 官方指南。核查：2026-10-31。