figmaautolayout专题

学习教程
https://www.bilibili.com/video/BV1ZQ4y1D7Fg/?spm_id_from&＃61;333.999.0.0&vd_source&＃61;ef114f70c3fd4d5394f12dbd3d022bbe

1.只有两个层级

1.如果是给一个形状&＃xff0c;shift&＃43;a&＃xff0c;autolayout 则形状是子元素&＃xff0c;还有一个frame父元素
2.如果给一个文字下面再加一个形状&＃xff0c;一起autolayout 则形状自动变成frame,且有填充&＃xff0c;只有文字是子元素
3.能相互影响的只有相邻的父元素和子元素
4.下面这些设置是针对父元素的
5.一层一层调&＃xff0c;从最里面的拉满&＃xff0c;再调外面的也拉满

2.hug和fill

hug:跟着内容走&＃xff0c;内容大就大&＃xff0c;被撑起来&＃xff0c;默认就是这种状态&＃xff0c;对应前端里的box默认状态
默认HUG情况下&＃xff0c;子元素形状怎么变化&＃xff0c;外部frame也就怎么变化
fill就是填满&＃xff0c;就是让元素跟着父元素走&＃xff0c;比如原来子元素是超出外框的&＃xff0c;给子元素一个fill,它就收进来了
autolayout变化层级的权限比普通frame的高

HUG:跟着里面内容走&＃xff0c;没有子元素就没有HUG
FILL&＃xff1a;跟着外框走&＃xff0c;没有外框就没有FILL

就是前端里Box-sizing属性

在父级调文字

下列子元素全部fill填充的效果
第二个改成固定&＃xff0c;则第二个单独计算宽度&＃xff0c;其他仍然响应式

下面是中间宽度fill, 左右两侧固定

重叠&＃xff1a;就是中间间距设为auto

红圈部分是原型&＃xff0c;演示的时候上面固定&＃xff0c;位置固定的时候用

固定这里是有个小分类&＃xff0c;可以把想固定的地方都放一起

红圈部分按shift 可以多选

下图红框就是用等比例缩放

布局约束只被最近一级的frame约束&＃xff0c;隔级别&＃xff0c;跨级别就不行
组没有布局约束的权限&＃xff0c;尽量都用frame
组也没有网格和栅格&＃xff0c;frame是一个框架的概念

栅格的横向和竖向都可以加

上下左右都约束以后&＃xff0c;可以跟着栅格走
用栅格自动处理除不尽的问题&＃xff0c;自动计算间距&＃xff0c;只要375把两边边距留好&＃xff0c;中间间距留好&＃xff0c;位置约束好即可
一般用栅格等分东西