使用布局约束

布局约束允许你指定对象在调整其所包含的框架大小时的响应方式，布局约束可以应用于框架以及单个对象。

当你想要控制设计在不同屏幕尺寸或设备上的外观时，这非常适用。

在 Figma 中了解有关原型的更多信息。

水平布局约束

水平布局约束确定调整框架水平大小时其内部对象的响应方式。

• Left 保持对象距离框架左侧的距离不变。
• Right 保持对象距离框架右侧的距离不变。
• Left and right 保持对象距离框架左右两侧的距离不变。
• Center 保持对象在框架中水平居中。
• Scale 缩放时将以百分比形式固定对象水平上的大小和位置。

垂直布局约束

垂直布局约束确定调整框架垂直大小时其内部对象的响应方式。

• Top 保持对象距离框架顶部的距离不变。
• Bottom 保持对象距离框架底部的距离不变。
• Top and bottom 保持对象距离框架顶部和底部的距离不变。
• Center 保持对象在框架中垂直居中。
• Scale 缩放时将以百分比形式固定对象垂直上的大小和位置。

使用布局约束

要设置项目的布局约束：

1. 选择框架内需要应用布局约束的对象。

   

2. 找到属性面板中的 Constraints 设置。

   

3. 使用第一个下拉菜单设置水平布局约束。

   

4. 使用第二个下拉菜单设置垂直布局约束。

   

5. 或者使用图示（在下拉菜单的左侧）设置对象的布局约束，蓝线表示当前已应用的布局约束：

   

   提示

   你可以按住 shift 键选择非单向布局约束，例如 left and right，或 left and right。

6. 如果希望对象在滚动时固定位置（如导航栏），请选中 Fix position when scrolling。

   

7. 如果希望图像自适应调整大小时，可以使用以下布局约束：

   

组与框架

由于组本身不是对象，因此它没有明确的边界和影响布局约束的能力。 如果你的对象在组中，则你将无法将约束应用于组本身。 如果将约束应用于组，则这些约束将应用于组中的所有子对象。