Flex 除了主轴上的排布控制外，还可以在纵轴（交叉轴）以及多行内容上进行对齐。本篇将重点讲解 alignItems（单行/列内纵轴对齐）与 alignContent（多行/列换行后纵轴分布）属性。

一、纵轴对齐（alignItems）

declare class FlexAttribute {
  alignItems(value: ItemAlign): FlexAttribute;
}

enum ItemAlign {
  Auto,      // 默认：根据内容自动伸缩
  Start,     // 主轴起点对齐
  Center,    // 居中对齐
  End,       // 主轴终点对齐
  Baseline,  // 基线对齐
  Stretch,   // 拉伸到容器高度
}

1.1 Auto（自动）

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Auto })
  .size({ width: '100%', height: 60 })
  .backgroundColor(Color.Pink)
{
  /* 不同高度的 Text 按其本身高度排列 */
}

1.2 Start / Center / End

Flex({ alignItems: ItemAlign.Start })  // 纵轴顶部对齐
Flex({ alignItems: ItemAlign.Center }) // 纵轴居中
Flex({ alignItems: ItemAlign.End })    // 纵轴底部对齐

1.3 Baseline

Flex({ alignItems: ItemAlign.Baseline })
  /* 文本组件按文字基线对齐，确保文字底部一线 */

1.4 Stretch

Flex({ alignItems: ItemAlign.Stretch })
  /* 子组件高度被拉伸，填满容器纵轴 */

二、多行对齐（alignContent）

当 wrap 为 Wrap 或 WrapReverse 时，子组件会换行或列。此时，多行/列之间的分布可由 alignContent 控制：

declare class FlexAttribute {
  alignContent(value: FlexAlign): FlexAttribute;
}

• 配置与 justifyContent 相同的 6 种模式，但沿纵轴分布。

2.1 Start / Center / End

Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start })
  /* 多行紧贴容器顶部 */

Flex({ alignContent: FlexAlign.Center })
  /* 多行居中 */

Flex({ alignContent: FlexAlign.End })
  /* 紧贴底部 */

2.2 SpaceBetween / SpaceAround / SpaceEvenly

Flex({ alignContent: FlexAlign.SpaceBetween })
  /* 多行两端对齐，行间距均等 */

Flex({ alignContent: FlexAlign.SpaceAround })
  /* 多行行间距均等，首尾间隔为行间距一半 */

Flex({ alignContent: FlexAlign.SpaceEvenly })
  /* 多行及首尾间距完全一致 */

三、综合示例

@Entry @Component
struct FlexAlignDemo {
  build() {
    Column({ space: 12 }) {
      // 纵轴基线对齐 + 换行
      Flex({
        direction: FlexDirection.Row,
        wrap: FlexWrap.Wrap,
        alignItems: ItemAlign.Baseline,
        alignContent: FlexAlign.SpaceAround
      })
      .size({ width: '100%', height: 140 })
      .backgroundColor(Color.Pink)
      {
        Text('A').size({ width: 50, height: 20 }).backgroundColor('#aabbcc')
        Text('BB').size({ width: 50, height: 30 }).backgroundColor('#bbaacc')
        Text('CCC').size({ width: 50, height: 40 }).backgroundColor('#ccaabb')
        Text('DDDD').size({ width: 50, height: 50 }).backgroundColor('#abcabc')
        /* 更多项目 */
      }
    }
    .padding(10)
    .width('100%')
    .height('100%')
  }
}

四、小结

1. alignItems：单行/列内的纵轴对齐，控制单行高度和基线对齐。
2. alignContent：多行/列生成后的纵轴布局，仅在换行时生效。
3. 合理结合 wrap、justifyContent、alignItems、alignContent，即可实现复杂的响应式网格布局。