HarmonyOS Flex布局
前置知识：
- 一次开发，多端部署:一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验
- 自适应布局:当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。常见的自适应布局有:线性布局、层叠布局、弹性布局、相对布局等。自适应布局能力可以实现界面显示随外部容器大小连续变化
- 响应式布局:当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。
- Navigation:页面根容器，一般用于分栏布局场景使用。
Flex布局：
提供了更加灵活和有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。广泛应用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等场景
- 主轴和交叉轴
- 主轴：Flex布局的主轴是水平方向（默认）或垂直方向（通过设置方向），子元素默认沿主轴排列
- 交叉轴：垂直于主轴的轴线，用于设置子元素在交叉轴方向的对齐方式
- 布局方向
- 默认方向：主轴为水平方向（FlexDirection.Row），子元素从起始端沿着水平方向开始排布
- 其他方向：可以通过设置方向参数（如FlexDirection.RowReverse、FlexDirection.Column、FlexDirection.ColumnReverse）来改变主轴方向
- 布局换行
- 单行布局：子元素在主轴方向上的尺寸之和小于容器的主轴尺寸时，所有子元素在同一行排列
- 多行布局：子元素在主轴方向上的尺寸之和大于容器的主轴尺寸时，容器会换行，每一行子元素按照主轴方向排列
- wrap属性：控制多行布局时的换行方式，包括FlexWrap.NoWrap（默认值）、FlexWrap.Wrap和FlexWrap.WrapReverse
- 主轴对齐方式
- 对齐方式：可以通过justifyContent参数设置子元素在主轴方向上的对齐方式，包括FlexAlign.Start、FlexAlign.Center、FlexAlign.End和FlexAlign.SpaceBetween等
- 交叉轴对齐方式
- 对齐方式：可以通过alignItems参数设置子元素在交叉轴方向上的对齐方式，包括ItemAlign.Auto、ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch、ItemAlign.Baseline和ItemAlign.End
- 自适应拉伸
- 通过设置子元素的
flexBasis和flexGrow属性，可以实现子元素的自适应布局flexBasis设置子元素在主轴方向上的基准尺寸，flexGrow设置子元素在主轴方向上分配剩余空间的比例。flexShrink：设置子元素在主轴方向上压缩的比例
- 通过设置子元素的
建议使用Column/Row替代Flex，性能会得到提升