自动布局适合管理按顺序排列的内容；浮在角落的角标可用绝对定位，互相覆盖的头像可用负间距，再单独调整堆叠顺序。先判断元素该不该占用排列空间，再设置位置，往往比反复拖动更直接。基础添加方法可先看Pixso 自动布局教程，下面重点说明进阶设置的取舍。
自动布局2.0加入了绝对定位、负间距堆叠和画布控件等能力，可用于更换分布方式、加入浮动元素、做重叠排列，以及直接调整间距。把这些功能放在具体对象上理解，更容易知道何时该使用哪一种关系。
1. 先设置分布方式与尺寸响应
自动布局能够建立高效的设计规范，在增加、删除、修改一些元素后，无需重新调整相邻元素位置和尺寸，智能适配组件间的布局。
在自动布局面板中，可设置集中或均匀分布、对齐与独立边距。集中分布依据指定间距排列；均匀分布则受容器可用空间影响。修改前先确认需要固定的是对象间距离，还是整个容器两端的位置。
在调整尺寸响应时，先确认当前选中的是父容器还是里面的子元素。父容器负责整体排列与边距，子元素决定自己在可用空间中如何伸缩；选错层级，即使数值相同也会得到不同结果。
2. 支持绝对定位，元素任意摆放
遇到消息通知、播放按钮等设计，需要把对应元素插入自动布局，元素就会自动吸附到现有布局，按照现有布局的关系排列，无法做到任意摆放位置。
将不需要参与顺序排列的元素设为绝对定位后，就可以单独安排它的位置。消息角标、卡片角落的装饰或覆盖在封面上的播放入口，通常需要这种关系；正文、价格和随内容增长的提示则不应轻易脱离布局。
搭配约束设置，可以参照父容器边缘确定元素的位置关系。容器尺寸改变时，再检查元素是否仍停留在预期位置；绝对定位不代表可以忽略它与父容器的关系。
消息角标不应把标题挤到下一行
先做一个横向通知卡：图标、标题、时间依次排列。未读角标属于图标的附属状态，不是第四项正文内容，可放在图标容器内部并使用绝对定位。这样标题变长时，正文仍按原有规则伸缩，角标只跟随图标，而不是被挤到时间旁边。
测试时把标题从“新的评论”换成“设计稿中的三个问题需要你回复”，再把角标由一位数换成“99+”。检查角标是否遮住图标、是否超出允许范围；绝对定位只解决是否参与排列，不会替你自动判断长内容是否冲突。
3. 一键修改间距，支持负间距堆叠
当成员头像或装饰卡片需要局部重叠时，普通的正间距会把对象推开。此时可考虑负间距，并把排列顺序与前后遮挡分开调整。
自动布局2.0支持调整图层堆叠顺序。重叠后的前后遮挡与元素在布局中的先后位置是两件事；修改堆叠顺序时，不必为了让第一位成员在前面就打乱成员排列。
负间距可让相邻元素重叠。以成员头像为例，先统一头像尺寸，再给相邻头像设置负间距；间距绝对值越大，重叠越多。保留足够可见区域区分成员，并为最后的“更多成员”入口留下清楚位置。
试着在三个头像之间插入第四个头像，然后把容器宽度缩小。若名字或操作按钮被覆盖，应先减少重叠范围或调整容器，而不是只把被挡住的图层移到最前面。头像装饰可以相叠，承担点击的入口仍需要可辨认的边界。
4. 画布控件交互，操作更加智能
在使用自动布局的时候，经常需要调整布局参数，很多设计师习惯在画布上直接调整，所以画布的交互逻辑就显得至关重要。
Pixso 优化了自动布局的画布控件交互，将光标移动到自动布局的元素之间，就会触发红色选取，拖动鼠标即可调节之间的间距，单击还能输入间距数字，无需移动到功能面板进行调节。
当拖动时按住 Alt/Option ，还能同时调整两侧内边距，交互逻辑更加智能，使用起来非常方便。
把内容变化纳入自动布局练习
在一个文件中分别保留普通排列、绝对定位角标和负间距头像三个小案例。每次修改后做同样的动作：增加一项、删除一项、填入长文字、缩窄容器。能解释每个对象为什么移动或不移动，才算理解了布局关系；仅把静态画面摆整齐，还不足以证明内容变化后不会出错。
