一、核心底层逻辑
自动布局本质是给一个父容器设置：
- 布局方向：水平/垂直
- 内边距（Padding）：内容和容器边缘的距离
- 间距（Spacing）：子元素之间的距离
- 对齐方式：上/中/下、左/中/右
- 大小规则：适配内容 / 固定宽高 / 填充容器
一旦开启 Auto Layout，子元素位置、容器大小全部自动计算，不能手动拖拽乱调。
二、5个关键规则
1. 方向：水平（Row）/ 垂直（Column）
- 垂直：子元素从上往下排，像列表
- 水平：子元素从左往右排，像按钮栏
2. 间距（Item spacing）
子元素之间固定距离，增删元素自动留空 。
比如间距8px，加一个按钮，自动空8px；删一个自动闭合。
3. 内边距（Padding）
容器和内部内容的距离，上下左右可分别设置。
比如左16、右16，文字变长，容器左右始终留16px空白。
4. 对齐方式
控制子元素在容器里怎么对齐：
- 垂直布局：左对齐 / 居中 / 右对齐
- 水平布局：顶部对齐 / 垂直居中 / 底部对齐
5. 尺寸约束（最重要，自适应核心）
每个图层有 3 种模式：
- Hug contents（适配内容）：图层大小跟着内容变，文字变长自动变大
- Fixed（固定）：宽高固定不变
- Fill container（填充容器）：占满父容器剩余空间（做弹性布局）
这就是为什么按钮文字改了，按钮自动变大；卡片加内容自动变长。
三、举个最直观例子：一个按钮
- 画矩形 + 文字
- 选中两者 → 开启 Auto Layout（垂直/水平都行）
- 设置：内边距上下8、左右16，间距0
- 文字改成更长：矩形自动加宽
- 文字换行：矩形自动加高
全程不用手动调矩形大小。
四、嵌套自动布局（UI设计核心用法）
Figma 支持多层嵌套：
- 外层：垂直布局 → 页面整体上下排布
- 中层：水平布局 → 一行放图标+文字
- 内层：单个按钮自动布局
实现整体响应式、局部自适应，手机、平板、网页一键适配。
五、和普通图层的本质区别
- 普通图层：位置大小手动控制，改一个元素，其他全部要手动挪
- 自动布局：规则控制，改内容/增删元素，全部自动重排