- basis
- shrink,grow
- 以及VisualElement的特性(子元素共同占满VisualElement的全部空间)
三者共同作用于UI。具体如下:
- VisualElement的实际尺寸是固定的,如1000px。
- 其下若有三个 b a s i s = = 400 p x basis==400px basis==400px的子元素,且按照basis设置实际尺寸,那么会超出VisualElement的实际尺寸。出于VisualElement的特性,三个子元素不会超出VisualElement,三个子元素会缩减自身的实际尺寸,导致实际尺寸<basis。
- 同理,三个 b a s i s = = 200 p x basis==200px basis==200px的子元素填不满VisualElement,三个子元素会生长,会导致实际尺寸>basis。
basis
basis表明了Flex中shrink和grow的基准,表示沿着父级中Flex->Direction的长度。
- px:以某个像素值作为基准。
- %:以父元素的比例作为基准。
- auto:根据本元素所包含的子元素进行计算,得到一个能包含所有子元素的值做基准。
auto的示例:
结构
basis | shrink | grow | |
---|---|---|---|
green | 100% | 1 | 1 |
red | auto | 1 | 1 |
初始(Label中没有任何内容)
Label中逐渐输入内容
shrink和grow
shrink与grow表示的是权重,在同级元素中的权重(若同属一个父元素,这里称同级元素)。权重越大(3>1),表示收缩以及生长的越快,既缩的越小,长的越大。
若同级元素的shrink分别为1,1,3,则在缩小的情形下,元素间的比例为3:3:1。
若同级元素的grow分别为1,1,3,则在生长的情形下,元素间的比例为1:1:3。
Note:
shrink为0,表示不会缩小,若此时子元素的basis总和 > VisualElement的实际尺寸,那么子元素们真的会堆叠到VisualElement的外面。
grow为0,表示不会放大,若此时子元素的basis总和 < VisualElement的实际尺寸,那么子元素们也不会填满VisualElement。
示例
父元素实际尺寸为1000px。
子元素base(px) | 子元素1的shrink/grow | 子元素2的shrink/grow | 子元素3的shrink/grow | 结果 | |
---|---|---|---|---|---|
情形一(不生长) | 100 | 1/0 | 1/0 | 1/0 | 三个子元素共占300px,有700px的空白 |
情形二(生长) | 同上 | 1/1 | 1/1 | 1/1 | 三个子元素各占100px,共占300px,但受到父级容器的影响,需要填满父级容器,所以各占父级的1/3 |
情形三(生长) | 同上 | 1/1 | 1/2 | 1/3 | basis之和<VisualElement实际尺寸,按照比例1:2:3占有VisualElement空间 |
情形四(不缩小) | 500 | 0/1 | 0/1 | 0/1 | basis之和>VisualElement实际尺寸,但不缩小,超出VisualElement的空间 |
情形四(缩小) | 500 | 1/1 | 1/1 | 1/1 | basis之和>VisualElement实际尺寸,会超出父级容器范围,各占1/3 |
情形五(缩小) | 同上 | 1/1 | 2/1 | 3/1 | 按照3:2:1的比例占有VisualElement的空间 |
声明
本人初学者,表述若有问题,请各位大佬在评论区以及私信中指出。本人会积极改正,以免误人子弟。谢谢!