在鸿蒙弹性布局的世界里，当父组件尺寸变得小巧玲珑时，子元素就得靠几个神奇属性来巧妙 "变身"，实现自适应布局，把有限的空间利用得恰到好处。
## 1. flexBasis：定好基准尺寸
\
flexBasis 就像是给子元素在父容器主轴方向上划了一块 "专属地盘"。要是设置了这个属性，子元素占的空间就按它说的算；要是没设，那就看 width 或者 height 的值啦。
从代码能看出，flexBasis 相当有 "主见"，不管其他设置怎么干扰，它总能决定子元素的基础占地大小。
## 2. flexGrow：瓜分剩余空间
\
flexGrow 可是个 "空间分配小能手"，专门负责把父容器剩下的空间，按照设定的比例分给各个子元素。
在这个例子里，父容器宽 420vp，减去子元素原始宽度总和与 padding，还剩 100vp 空间。设置了 flexGrow 的子元素就按比例 "瓜分" 这部分空间，没设的就只能守着自己原来那点儿地儿，所以第一个元素能分到 100 + 100 * 2/5 = 140vp 宽，第二个元素则是 100 + 100 * 3/5 = 160vp 宽。
## 3. flexShrink：按需压缩
\
当父容器突然变得 "小气"，空间不够用时，flexShrink 就发挥作用啦，它决定了子元素的压缩比例。
要是父容器空间不足，设置了 flexShrink 值的子元素，就会根据这个值的大小，"懂事" 地压缩自己，让大家都能在有限空间里挤一挤，没设这个属性的子元素，就没这么 "自觉" 啦。有了这几个属性助力，弹性布局在各种尺寸的父容器里，都能打造出规整又实用的页面效果。
PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇 ~
