Figma:Constraints 约束怎么用(不靠猜也能对齐)

Constraints 的作用是什么

Constraints 用来定义“当容器尺寸变化时,子元素如何跟随”。它不是装饰参数,而是响应式布局的基础:对齐、拉伸、固定距离都靠它来表达。

先分清两类:位置约束 vs 尺寸行为

位置约束决定贴左/贴右/居中/上下贴边;尺寸行为决定固定宽高还是跟随拉伸。很多“拉伸后跑偏”,其实是位置约束对了,但尺寸行为没设对(或反过来)。

场景1:按钮在右下角固定

把按钮放进容器后,Horizontal 选 Right,Vertical 选 Bottom;尺寸保持 Fixed。这样无论容器变宽变高,按钮都保持与右下角的距离不变。

场景2:顶部导航条左右撑满

导航条背景层 Horizontal 选 Left & Right(拉伸),Vertical 选 Top;高度 Fixed。中间 Logo 可以 Center;左右图标组分别设 Left/Right 并保持 Fixed。

场景3:卡片内容随宽度变化但边距不变

卡片容器内的图片/内容区可以设 Left & Right(让内容宽度随容器变化),但在 Auto Layout 场景下,优先用 Auto Layout 管控间距,再用 Constraints 兜底对齐,避免双重约束冲突。

常见问题排查

1)元素变形:检查是否误设为 Scale;2)居中不稳:Center 只解决位置,不解决尺寸;3)嵌套层级导致失效:确保约束设在正确的父级 Frame 内。

小结

先明确“贴哪边/居中”,再明确“是否拉伸”。对齐问题优先看父级 frame 与约束方向,尺寸问题优先看 Fixed/Fill/Scale 的组合。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功