UI自动布局是让容器按照方向、间距、内边距和尺寸规则排列内容。按钮文字变长时，按钮可以跟着变宽；商品名换行时，卡片可以增高，下面的卡片随之下移。它解决的是内容变化之后，哪些尺寸应该跟着变、哪些应该保持不变，并非把元素暂时对齐一次。
练习时不必先搭整套页面。在墨刀设计里，从一个按钮、一行商品信息开始，再把它们嵌套成订单卡片，比较短名称、长名称和缺少规格三种内容，就能看出规则是否设对。下面从这张卡片出发，依次设置尺寸关系，并检查内容变化后的结果。
自动布局、普通对齐和响应式有什么区别
普通对齐和等距分布，处理的是当前选中元素的位置。今天三个按钮排得整齐，明天其中一个标签变长，邻近元素未必会主动让位。自动布局把这段排列关系保存在父容器中，后续增删内容或改文字时，容器继续按规则计算。
响应式设计处理的范围更大：桌面双栏何时变成手机单栏、导航何时折叠、数据表怎样显示，都需要单独决定。自动布局可以帮助实施这些结构，但不会替你决定断点或信息优先级。需要跨屏规则时，可接着看响应式UI的断点与栅格方法。
先分清三个尺寸规则，宽和高要分别设置
同一个对象的宽、高可以采用不同规则。文字组经常是“宽度用父容器留给它的空间，高度随文字增长”，而不是宽高都随内容无限增加。理解这点比记住某个工具中的英文名称更重要。
| 尺寸规则 | 由什么决定 | 适合的对象与注意点 |
|---|---|---|
| 固定尺寸 | 设计者设定明确宽度或高度 | 商品缩略图、图标等；不要把整张含长文案的卡片也固定成只能放一行。 |
| 随内容变化 | 子元素所需尺寸，加上间距和内边距 | 按钮的宽度、文字组或卡片的高度；子元素应能给出确定的内容尺寸。 |
| 使用父容器可用空间 | 父容器扣除其他元素、内边距和间距后剩下的区域 | 商品行中的文字组、页面中的通栏卡片；父容器必须先有可分配的宽度。 |
容易出问题的是互相依赖：父容器等着子元素撑开，子元素又等着填满父容器。遇到尺寸异常，先给其中一层明确约束。例如卡片宽度由列表决定，文字组使用卡片剩余宽度；文字组高度由内容决定，卡片高度再跟随文字组。横、纵两个方向的计算顺序就清楚了。
第一步：做一个文字变长也能放下的按钮
- 输入真实标签。先创建“查看订单”文字，确定字体、字号和行高。暂时不要画一个固定宽度的底色矩形，再把文字摆在上面。
- 添加自动布局。选中文字，使用 Shift+A，或右侧自动布局的加号。墨刀会把所选内容放入用于布局的画板；已有容器也可以添加这项属性。
- 设置按钮留白。让文字居中，给容器设置左右、上下内边距。例如先用左右16、上下8的练习值，按钮宽度随文字和内边距增长。已有设计规范时沿用团队数值。
- 改变标签。将“查看订单”换成“查看订单详情”。预期是按钮变宽，文字左右仍有同样留白；若文字溢出而外框不动，检查选中的是按钮容器还是文字，以及容器是否被固定了宽度。
按钮若必须填满表单宽度，应把按钮容器宽度改为使用父容器可用空间，内部文字仍居中。按钮行高、上下内边距和最小操作区域要共同考虑，不能为了压进一行不断缩小字体；可参考按钮与输入框的尺寸规则。
第二步：把图片、文字和按钮组合成订单卡片
这张练习卡片包含商品缩略图、商品名称、规格和“查看订单”按钮。采用图中展示的横向结构：图片在左，商品文字居中，操作在右。先处理内层，再处理外层，避免一开始选中所有内容后得到一个难以控制的大容器。
先做商品文字组
将“通勤背包”和“灰色 · 1件”两层文字放入纵向自动布局，名称与规格间距先用4。两层文字保持左对齐，文字组高度随内容变化。商品名称需要有受限宽度才能换行，因此不要让它始终按单行内容无限加宽。
再做横向商品行
把缩略图、文字组和刚才的按钮按顺序放入横向容器。缩略图固定为72×72，文字组使用剩余宽度，按钮宽度随标签变化，三个对象之间的间距先用12。商品名称可能增长时，图片与文字通常顶端对齐；按钮是居中还是靠上，应按页面视觉选择，并在长名称下再看一次。
假设外层卡片宽600，左右内边距各16，图片宽72，当前按钮宽96，两段间距各12，文字组可用宽度就是600－32－72－96－24＝376。这不是产品内置规格，而是帮助理解空间分配的练习。把卡片改为360宽后，文字只剩136，标题会增加行数；如果按钮也改成长标签，文字空间还会进一步减少。
最后设置卡片与列表
给商品行的外层容器设置背景、圆角和16的内边距，卡片高度跟随内部最高的内容增长。把多张卡片放进纵向列表，再给列表设置卡片间距。长名称使一张卡片增高时，下一张卡片由列表自动下移，不需要手动拖开。
当136宽的文字区仍不足以表达商品信息时，不要强迫图片、文字和长按钮继续挤在一行。可以为窄屏建立另一种结构：图片和文字一行，操作区单独放在下方。它是有意识的布局调整，不是把所有图层都改为自动宽高就会出现的结果。
第三步：分清间距、内边距、对齐与换行
间距控制兄弟元素之间的距离，例如图片到文字；内边距控制内容到容器边缘的距离，例如图片到卡片左边。若商品行整体离边缘太远，应检查内边距，不要把文字向左拖出容器来补偿。
固定间距适合一组需要保持紧密关系的内容。均匀分布则会根据容器可用空间调整空隙，适合需要拉开两端的区域；容器变宽后，空隙变大是预期结果。若按钮之间必须保持12的距离，就不该同时要求它们均匀铺满整行。
标签、筛选项等数量会变化的内容，可以使用自动布局换行，并分别检查水平和垂直间隙。单个标签比整行还长时，仍需决定它自身能否换行或截断；“允许下一项换行”不能解决一个超长标签。设置入口与属性可参照墨刀图层布局帮助。
布局不对时，沿着这一层往外查
| 看到的现象 | 优先检查 | 具体调整 |
|---|---|---|
| 长商品名一直向右伸 | 文字本身和文字组的宽度 | 给文字明确的可用宽度并允许换行；不要先把最外层画板放大。 |
| 文字换行了，卡片却没有增高 | 文字组、商品行和卡片的高度 | 逐层查看哪一层固定高度或裁剪了内容，让应随内容变化的层恢复增长。 |
| 图片越来越窄，按钮挤出边界 | 横向一行的可用宽度分配 | 图片固定；文字承担伸缩；若剩余空间不足，重新安排操作区，不压缩重要文字。 |
| 删除规格后还留一大块空白 | 规格图层、包裹它的容器与间距 | 确认不只是清空了文字，空容器仍在；按有规格/无规格分别检查高度和间距。 |
| 卡片拉宽后，元素之间空隙异常大 | 分布方式 | 需要稳定距离时用固定间距；只有需要占满空间的区域才采用均匀分布。 |
| 修改卡片后下一张没有下移 | 卡片是否在同一个纵向列表里 | 给真正管理各卡片的父容器添加布局；单张卡片的内部规则不会替外部列表重新排位置。 |
头像组等叠放元素是另一种情况：它们可能故意使用负间距。此时还要决定哪个头像覆盖哪个头像，不能把覆盖关系误判为布局失败。普通列表先用不重叠的间距；确实要叠放时再处理层叠顺序。
用三种内容和一次缩窄检查组件
准备三张卡片：第一张名称为“通勤背包”；第二张改为“轻量防水通勤背包，适合电脑与日常随身物品”；第三张保留短名称，删除规格说明。长名称不应越出容器，无规格卡片不应保留无意义空行，三张卡片之间的间距应一致。接着拉窄列表，再把按钮改成“查看订单详情”，观察是否需要切换为上下结构。
这一步通过后再整理成可复用组件。交付时写明图片固定尺寸、文字宽度分配、卡片高度随内容增长，以及窄屏操作区的排列方式。研发仍需在真实页面中实现对应的布局规则；设计稿使用自动布局，不等于浏览器已经完成适配。
可以从墨刀设计工作台开始搭这张卡片：先改变内容，再调整容器宽度，最后检查外层列表。需要继续组织一套组件时，再看组件库的复用与版本管理。
