以下是链接中关于 HarmonyOS ArkUI弹性布局（Flex） 的核心内容总结：
1. 基本概念
- 主轴：子元素的默认排列方向轴线（起始点 → 结束点）。
- 交叉轴：垂直于主轴的轴线。
- 主轴尺寸：子元素在主轴方向的尺寸。
- 交叉轴尺寸：子元素在交叉轴方向的尺寸。
2. 布局方向（direction）
FlexDirection.Row（默认）：水平排列，从左到右。FlexDirection.RowReverse：水平反向排列，从右到左。FlexDirection.Column：垂直排列，从上到下。FlexDirection.ColumnReverse：垂直反向排列，从下到上。
3. 布局换行（wrap）
FlexWrap.NoWrap（默认）：不换行，超出则压缩子元素宽度。FlexWrap.Wrap：换行，按主轴方向排列多行。FlexWrap.WrapReverse：换行，按主轴反方向排列。
4. 主轴对齐方式（justifyContent）
FlexAlign.Start：起始端对齐（左对齐）。FlexAlign.Center：居中对齐。FlexAlign.End：结束端对齐（右对齐）。FlexAlign.SpaceBetween：两端对齐，子元素间距相等。FlexAlign.SpaceAround：子元素间距相等，首尾间距为间距一半。FlexAlign.SpaceEvenly：子元素及首尾间距完全相等。
5. 交叉轴对齐方式
(1) 容器设置（alignItems）
ItemAlign.Start：顶部对齐。ItemAlign.Center：居中对齐。ItemAlign.End：底部对齐。ItemAlign.Stretch：拉伸填充（未设尺寸时生效）。ItemAlign.Baseline：文本基线对齐。
(2) 子元素设置（alignSelf）
- 优先级高于容器的
alignItems，可单独覆盖对齐方式。
(3) 多行对齐（alignContent）
- 控制多行布局在交叉轴的对齐方式（如
SpaceBetween、SpaceEvenly）。
6. 自适应拉伸
- **
flexBasis**：设置主轴基准尺寸（优先级高于width/height）。 - **
flexGrow**：按比例分配父容器剩余空间。 - **
flexShrink**：按比例压缩子元素以适应空间不足。
7. 典型场景示例
scss
Flex({
direction: FlexDirection.Row,
wrap: FlexWrap.NoWrap,
justifyContent: FlexAlign.SpaceBetween, // 主轴两端对齐
alignItems: ItemAlign.Center // 交叉轴居中
}) {
Text('1').width('30%').height(50)
Text('2').width('30%').height(50)
Text('3').width('30%').height(50)
}
.height(70)
.width('90%')
.backgroundColor('#AFEEEE')效果：子元素水平均匀分布，垂直居中，高度固定。
关键点总结
| 分类 | 属性 | 作用 |
|---|---|---|
| 布局方向 | direction |
控制主轴方向（水平/垂直） |
| 换行 | wrap |
单行/多行布局控制 |
| 主轴对齐 | justifyContent |
子元素在主轴的对齐方式 |
| 交叉轴对齐 | alignItems |
所有子元素的统一对齐方式 |
| 子元素交叉轴对齐 | alignSelf |
单个子元素的对齐方式（覆盖父容器设置） |
| 自适应 | flexGrow/flexShrink |
分配剩余空间/压缩空间 |
适用场景
- 导航栏均匀分布、卡片布局、表单排列等需要灵活控制子元素对齐与分布的界面。
此文档详细说明了 Flex 布局在 HarmonyOS ArkUI 中的完整能力，开发者可通过调整参数实现复杂响应式布局。