flexBasis, flexGrow, flexShrink 三个属性的区别和使用 HarmonyOS 鸿蒙Next

flexBasis, flexGrow, flexShrink 三个属性的区别和使用 HarmonyOS 鸿蒙Next

flexBasis 初始尺寸
定义子组件在主轴方向上的初始基准尺寸
优先级高于width或height

.flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽度

.width('40%')
.flexBasis('auto') // 设置width以及flexBasis值auto，使用width的值

.flexBasis(100) // 未设置width以及flexBasis值为100，宽度为100vp

.flexBasis(100)
.width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp

flexGrow 扩展
控制剩余空间分配比例，默认值为0（不扩展）
所有子组件宽度之和小于父容器宽度时，剩余空间会按各元素的flexGrow值比例分配

flexShrink 收缩
定义空间不足时的收缩比例，默认值为1（等比例收缩）
当子组件总宽度超过父容器时，超出部分按各元素的flexShrink值比例缩减
flexShrink(0)可禁止元素收缩，保持固定尺寸

哪些容器支持使用flexBasis、flexGrow、flexShrink？？
Flex Row/Column Grid与GridItem 支持
Stack，List/Swiper Tabs 不支持，无法直接使用弹性属性

若无需复杂弹性布局，Row/Column性能更优
在横竖屏切换时，弹性属性可自动调整布局比例，减少代码适配成本

更多关于flexBasis, flexGrow, flexShrink 三个属性的区别和使用 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于flexBasis, flexGrow, flexShrink 三个属性的区别和使用 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，flexBasis、flexGrow和flexShrink是用于控制Flex布局中子组件尺寸和伸缩行为的属性。

  1. flexBasis：定义子组件在主轴上的初始大小。它可以设置一个固定值（如100px）或使用百分比（如50%）。flexBasis优先级高于width或height属性。如果未设置flexBasis，则默认使用width或height的值。

  2. flexGrow：定义子组件在主轴上的伸展能力。当父容器有剩余空间时，子组件会根据flexGrow的值按比例分配剩余空间。默认值为0，表示不伸展。如果所有子组件的flexGrow值相同，则它们将平分剩余空间。

  3. flexShrink：定义子组件在主轴上的收缩能力。当父容器空间不足时，子组件会根据flexShrink的值按比例收缩。默认值为1，表示可以收缩。如果设置为0，则子组件不会收缩。

总结：

  • flexBasis设置初始大小。
  • flexGrow控制子组件的伸展。
  • flexShrink控制子组件的收缩。
回到顶部