快速了解“扩展比率”和“压缩比率”

用户场景

相信很多人都在设计器上看到过“扩展比率”和“压缩比率”这两个属性，但非前端开发可能大多会对这两个属性表示疑惑：“这是个啥子属性？干嘛用的？”。答：这两个属性能帮你做出可以很好兼容适配不同尺寸屏幕的布局。

功能介绍

1.扩展比率

扩展比率用于设置一个控件在分配父级控件剩余空间时能分配到的空间比例（此处空间指：当父级控件为水平布局时，指宽度；当父级控件为垂直布局时，指高度），咋一听好像很难理解，没关系，下面我们直接图解：

拿图中第三个例子说明，B、C的扩展比率分别为1和2，剩余空间为600px，则B分得剩余空间为:

 600 * (1 / (1 + 2)) = 200，加上自身基础宽度，则最终B的宽度为400px，同理得C的最终宽度为600px。

注：

① 如果你的父容器设置了垂直布局，那么此时分配的就会是父容器的剩余高度空间，分配对象为子容器的高度；

②扩展比率设置为0即表示该控件不被扩展，只维持自身宽度(高度)

③当父容器剩余空间小于等于0时，扩展比率不生效（因为没有空间可分了）

2.压缩比率

压缩比率用于设置一个控件在父级控件空间不足以放下所有子控件时，不足的部分