用途

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. 基于 Impala 的高性能数仓建设实践之虚拟数仓

    导读:本文主要介绍网易数帆 NDH 在 Impala 上实现的虚拟数仓特性,包括资源分组.水平扩展.混合分组和分时复用等功能,可以灵活配置集群资源.均衡节点负载.提高查询并发,并充分利用节点资源. 接 ...

  2. [oeasy]python0125_汉字打印机_点阵式打字机_汉字字形码

    汉字字形码 回忆上次内容 IBM 将 ASCII 扩展之后 规定了 一个字节的字符集 并制作了 相应的字形库   ​   添加图片注释,不超过 140 字(可选)   这种显示模式和字符大小之下 中文 ...

  3. oeasy教您玩转vim - 90 - # 语法定义syntax

    ​ 内容查找 grep 回忆 我们这次研究了一下配色方案 murphy虽然配色好看 但是对于java的支持并不好 我们对于murphy进行了修改 增加了String.StorageClass颜色的定义 ...

  4. TIER 0: Dancing

    TIER 0: Dancing SMB Server Message Block 是一种网络协议,用于在计算机网络上共享文件.打印机和其他资源.它最初由微软开发,用于在 Windows 操作系统之间进 ...

  5. 学习笔记--Java方法基础

    Java方法基础 那么什么是方法呢? public class MethodTest01{ public static void main(String[] args){ // 需求1:编写程序计算 ...

  6. 如何查询MySQL存储的树形结构，层次结构

    表定义如下 如果我们需要在表中查询这个树状结构,通过SQL语句,有两种查询方法: 1.通过inner自连接查询,适用于简单的结构 SELECT * FROM course_category AS on ...

  7. 【Hibernate】02 快速入门

    环境搭建 : Windo7 x64 + IDEA 2018+ JDK 8+ Maven 3.0+ MySQL 5.0+ 创建Hibernate工程: 导入依赖坐标 <dependencies&g ...

  8. 2024-08-03：用go语言，给定一个从 0 开始的字符串数组 `words`， 我们定义一个名为 `isPrefixAndSuffix` 的布尔函数，该函数接受两个字符串参数 `str1` 和

    2024-08-03:用go语言,给定一个从 0 开始的字符串数组 words, 我们定义一个名为 isPrefixAndSuffix 的布尔函数,该函数接受两个字符串参数 str1 和 str2. ...

  9. 鹏城实验室——启智平台使用外部docker镜像 —— 实测并不可用，该功能可用性较低

    参考: https://bbs.openi.org.cn/forums/5492 需要注意,目前只有NVIDIA GPU运行环境下允许使用外部docker镜像. 注意: 对于该功能实测后发现可用性不高 ...

  10. .NET 开源权限认证项目 MiniAuth上线

    前言 在Web应用项目中权限认证是个绕不开的话题,传统方法复杂又耗时.MiniAuth推出专为.NET开发者设计的简单.实用的权限认证项目. MiniAuth,作为ASP.NET Core的插件,让我 ...