自动布局（Auto Layout）是Pixso中创建响应式组件的核心功能。它让设计元素能根据内容自动调整大小和位置，是实现设计稿在不同屏幕尺寸下自适应的关键。
什么是自动布局？
在没有自动布局的情况下，如果你修改按钮上的文字长度，按钮本身不会自动调整——你需要手动拉伸。开启自动布局后，按钮会跟随文字长度自动扩展，就像HTML中的弹性布局一样。
核心概念： - 方向：横向（水平排列）或纵向（垂直排列） - 间距：子元素之间的间隔 - 内边距：容器边缘与内容的距离（Padding） - 对齐：子元素在容器内的对齐方式
实战一：自适应按钮组件
目标：创建一个文字长度变化时自动调整宽度的按钮。
步骤：
1. 使用矩形工具创建一个按钮背景，填充主色（如蓝色 #2563EB）
2. 在按钮上方添加文字"按钮"，设置白色字体
3. 同时选中矩形和文字，点击右侧属性面板的"自动布局"按钮（或按 Shift+A）
4. 设置方向为横向，内边距上下 12px、左右 24px，间距 0
验证：双击文字修改为"这是一个很长很长的按钮文字"，按钮会自动横向扩展。
实战二：响应式卡片列表
目标：创建多个卡片，当卡片数量变化时自动换行排列。
步骤： 1. 创建一张卡片：包含图片区域（固定高度200px）+ 标题 + 描述文字 2. 选中图片、标题和描述，创建纵向自动布局（间距 8px，内边距 16px） 3. 复制3张相同的卡片 4. 同时选中所有卡片，再次创建自动布局，这次方向为横向，并勾选"换行" 5. 设置卡片之间间距为 16px
验证：复制第5张卡片到列表中——当一行放不下时，卡片自动换到下一行。
实战三：自适应导航栏
目标：创建一个在不同画板宽度下自动调整的导航栏。
步骤： 1. 创建导航栏背景（一个横跨画布顶部的矩形） 2. 添加5个导航项文字（首页、产品、方案、关于、联系我们） 3. 选中所有导航项，创建横向自动布局，间距 32px 4. 选中整个导航栏，在自动布局中设置"填充"模式（而非"固定"），让导航栏宽度跟随画板 5. 设置约束：Logo 固定在左侧，导航菜单居中
验证：将导航栏放入不同宽度的画板（如1440px桌面和375px移动端），导航项会自动重新排列。
约束与响应式
约束（Constraints）决定了元素在父容器尺寸变化时的行为：
- 左/上约束：元素固定在父容器的左边或顶部
- 右/下约束：元素固定在父容器的右边或底部
- 左右约束：元素宽度跟随父容器变化
- 居中约束：元素保持在父容器中间位置
- 缩放约束：元素的宽高按比例跟随父容器缩放
常见组合：导航栏Logo设"左+上"约束固定在左上角；页面内容区设"左+右+上"约束让宽度自适应当前屏幕。
自动布局最佳实践
- 从内到外搭建：先创建内部组件（按钮/卡片），再创建外部容器（列表/导航栏）
- 善用嵌套：纵向容器内嵌套横向容器，实现复杂布局
- 检查约束链：确保每一层都设置了合理的约束，避免缩放时错位
- 测试多种宽度：用不同尺寸的画板测试组件在各种屏幕下的表现
常见问题
普通布局中元素位置是"固定"的——你放到哪里就在哪里。自动布局中元素位置由方向、间距和约束这三个规则决定，当内容变化时自动调整。这是从"静态画布"思维到"动态规则"思维的转变。
检查是否勾选了自动布局中的"换行"选项。不勾选时，所有元素会排在一行；勾选后，超出容器宽度的元素会自动换到下一行。
记住一个原则：外层决定排列方向（卡片列表用纵向，导航栏用横向），内层决定每个组件内部布局（卡片内部用纵向，按钮内部用横向）。绘制前先想清楚"这两个元素是上下关系还是左右关系"。
可以。Pixso的自动布局本质上就是设计工具中的Flexbox：方向（横向/纵向）对应flex-direction，间距对应gap，内边距对应padding，对齐方式对应justify-content和align-items，换行选项对应flex-wrap。如果你有前端开发经验，会发现自动布局的思维模型和CSS Flexbox几乎完全对应。这也是为什么掌握自动布局后，设计稿转代码会变得更加顺利——设计师和开发者在用同一套"弹性布局"的思维工作。
普通布局中元素位置固定，自动布局中元素位置由方向、间距和约束三个规则决定，内容变化时自动调整。
检查是否勾选了"换行"选项。未勾选时所有元素排在一行，勾选后超出容器宽度的元素自动换到下一行。
外层决定排列方向，内层决定组件内部布局。绘制前先确定元素是上下关系还是左右关系。