[Unity UIToolkit] Flex

1. basis
2. shrink，grow
3. 以及VisualElement的特性（子元素共同占满VisualElement的全部空间）

三者共同作用于UI。具体如下：

1. VisualElement的实际尺寸是固定的，如1000px。
2. 其下若有三个$basis==400px$的子元素，且按照basis设置实际尺寸，那么会超出VisualElement的实际尺寸。出于VisualElement的特性，三个子元素不会超出VisualElement，三个子元素会缩减自身的实际尺寸，导致实际尺寸<basis。
3. 同理，三个$basis==200px$的子元素填不满VisualElement，三个子元素会生长，会导致实际尺寸>basis。

basis

basis表明了Flex中shrink和grow的基准，表示沿着父级中Flex->Direction的长度。

1. px：以某个像素值作为基准。
2. %：以父元素的比例作为基准。
3. 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的空间

声明

本人初学者，表述若有问题，请各位大佬在评论区以及私信中指出。本人会积极改正，以免误人子弟。谢谢！