Figma 学习笔记 – Constraints 约束
2023-09-27 14:23:55 时间
用途
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 是和父元素对等比例一起长大.
相关文章
- Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
- [吴恩达机器学习笔记]14降维1-2降维的应用数据压缩与数据可视化
- unittest学习笔记
- 机器学习笔记之集成学习(三)AdaBoost(加性模型的数学推导)
- Andrew Ng机器学习公开课笔记 -- 线性回归和梯度下降
- Go分布式爬虫学习笔记(十一)
- 来自大佬洗礼!2022 头条首发纯手打 MySQL 高级进阶笔记, 吃透 P7 有望
- spring cloud学习填坑笔记
- OpenCV学习笔记之课后习题练习3-4
- Dynamic CRM 2013学习笔记 系列汇总
- 外设驱动库开发笔记47:ADS111x系列ADC驱动
- ESP8266接入腾讯云开发笔记(二)创建云端产品与设备
- javascript学习笔记
- 高效能人士的七个习惯笔记
- 【监控笔记】【1.3】监控事件系列——SQL Trace(黑盒跟踪 BlackBox Trace)
- Mybatis学习笔记——day04
- 最优化课堂笔记05——一维最优化方法(含重点:黄金分割法)
- Linux下汇编语言学习笔记30 ---
- Arduino学习笔记25