用途

Constraints 用于 responsive design, 子元素和父元素建立约束关系后, 当父元素 dimension 变换的时候, 子元素会做出相应的变化 (移动位置或 resize dimension)

例子

约束有份左右和上下, 概念是一样的，只是方向不同而已, 所以这里我指说其中一边.

默认的约束时 Left, Top

Left

当约束 Left 时, 意味着子元素的 Left 始终保持和父元素的距离.

所以当拉动父元素左边时, 子元素也一起移动了.

而当拉动父元素右边时, 子元素则没有任何反应 (因为右边没有被约束)

Right

和 Left 相反, 右边被固定了

Left and Right

当 2 边都被约束以后, 子元素的 width 就会被强行改变, 以确保左右始终和父元素保持固定的距离

Center

center 约束的是中心点, 所以当拉动父元素左边或右边时, 子元素都会移动, 因为它要确保中心点失踪一致.

Scale

Scale 和 Left and Right 的区别

上方是 left and right, 下方是 scale

虽然 2 方的子元素都被 resize 了, 但是结果还是差很多的,

left and right 的关键是约束左右的距离

而 scale 是和父元素对等比例一起长大.

Figma 学习笔记 – Constraints 约束的更多相关文章

  1. Oracle 学习笔记 10 -- 约束

    本次笔记来学习约束,约束在表中无处不在. 比如,表中的数据不同意为空或者是表中id为设为主键,都是约束. 约束分类:         主键约束(PRIMARY KEY):主键表示表中一个唯一的标识,本 ...

  2. MySQL学习笔记7——约束

    约束 约束 *约束是添加在列上的,用来约束列的! 1.主键约束(唯一标识) ***非空*** ***唯一*** ***被引用*** *当表的某一列被指定为主键后,该列就不能为空,不能有重复值出现. * ...

  3. iOS学习笔记——AutoLayout的约束

    iOS学习笔记——AutoLayout约束 之前在开发iOS app时一直以为苹果的布局是绝对布局,在IB中拖拉控件运行或者直接使用代码去调整控件都会发上一些不尽人意的结果,后来发现iOS在引入了Au ...

  4. Xilinx约束学习笔记（一）—— 约束方法学

    <Xilinx约束学习笔记>为自己阅读 Xilinx 官方 UG903 文档后的学习笔记,大多数为翻译得来,方便大家学习. 1 约束方法学 1.1 组织约束文件 Xilinx 建议将时序约 ...

  5. SQL反模式学习笔记5 外键约束【不用钥匙的入口】

    目标:简化数据库架构 一些开发人员不推荐使用引用完整性约束,可能不使用外键的原因有一下几点: 1.数据更新有可能和约束冲突: 2.当前的数据库设计如此灵活,以至于不支持引用完整性约束: 3.数据库为外 ...

  6. 【转载】【时序约束学习笔记1】Vivado入门与提高--第12讲 时序分析中的基本概念和术语

    时序分析中的基本概念和术语 Basic concept and Terminology of Timing Analysis 原文标题及网址: [时序约束学习笔记1]Vivado入门与提高--第12讲 ...

  7. V-rep学习笔记：Reflexxes Motion Library 3

    路径规划 VS 轨迹规划 轨迹规划的目的是将输入的简单任务描述变为详细的运动轨迹描述.注意轨迹和路径的区别:Trajectory refers to a time history of positio ...

  8. V-rep学习笔记：并联机构正逆运动学

    Solving the FK problem of simple kinematic chains is trivial (just apply the desired joint values to ...

  9. Android学习笔记36：使用SQLite方式存储数据

    在Android中一共提供了5种数据存储方式,分别为: (1)Files:通过FileInputStream和FileOutputStream对文件进行操作.具体使用方法可以参阅博文<Andro ...

  10. Spring实战第五章学习笔记————构建Spring Web应用程序

    Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...

随机推荐

  1. card 卡片 html

    {% extends 'base.html' %} {% block content %} <div class="container"> <h1>客户信息 ...

  2. oeasy教您玩转vim - 23 - 配置文件

    配置文件 回忆上节课内容 我们上次找到配置文件的位置 ~/.vimrc 了解各种配置开关 修改配置文件并应用 这次想了解和配色方案相关的内容 colorscheme vi ~/.vimrc.old 中 ...

  3. 一文揭开JDK21虚拟线程的神秘面纱

    虚拟线程快速体验 环境:JDK21 + IDEA public static void main(String[] args) { try (var executor = Executors.newV ...

  4. python 列表append和 的区别？？

    python列表中的合并 python列表中append方法是给列表增加一个元素,而'+='是增加上该符号后边的元素,类似于extend方法 不知道对错,先记下来.我学的append方法是在列表最后追 ...

  5. Python 实时获取任务请求对应的Nginx日志

    需求描述 项目需求测试过程中,需要向Nginx服务器发送一些用例请求,然后查看对应的Nginx日志,判断是否存在特征内容,来判断任务是否执行成功.为了提升效率,需要将这一过程实现自动化. 实践环境 P ...

  6. 如何对jar包修改并重新发布在本机

    本人苦于jieba不能如何识别伊利丹·怒风,召唤者坎西恩这种名字,对jieba-analysis进行了解包和打包 步骤1:找到对应jar 步骤2:在cmd中输入jar -xvf xxx.jar解压包, ...

  7. STM32定时器---正交编码器模式详解

    https://blog.csdn.net/wang328452854/article/details/50579832

  8. ComfyUI插件：ComfyUI Impact 节点（三）

    前言: 学习ComfyUI是一场持久战,而 ComfyUI Impact 是一个庞大的模块节点库,内置许多非常实用且强大的功能节点 ,例如检测器.细节强化器.预览桥.通配符.Hook.图片发送器.图片 ...

  9. RPC和 HTTP协议

    RPC 和HTTP 的区别 服务发现 HTTP,知道服务域名,可以通过 DNS 解析 得到 服务的IP地址,从而进行访问 RPC 需要一个专门的中间服务去保存服务名和IP信息(注册中心,nacos.c ...

  10. 【C】Re05 指针

    一.变量 & 指针 变量 = 内存地址 + 存储值 指针变量 = 内存地址 + 存储值[变量的内存地址] 作用: 间接访问内存地址 内存地址 = 地址编号 地址编号:内存中的每个字节唯一的编号 ...