h691938207 1楼

在 ArkUI 的 Flex 容器布局中，alignItems 和 alignContent 都是用于控制子组件在 交叉轴（Cross Axis） 上的对齐方式，但它们的作用对象和生效条件有所不同。

简单来说：

alignItems 是处理每一行内部子元素在交叉轴上的对齐。
alignContent 是处理多行之间在交叉轴上的整体对齐。

1. alignItems

作用对象：Flex 容器中的子组件。
生效条件：适用于单行和多行 Flex 容器。
功能描述：它定义了子组件在当前行内的交叉轴对齐方式。
- 在单行布局中，它控制所有子组件相对于容器交叉轴的对齐。
- 在多行布局中，它控制子组件在各自所在的行内的对齐方式。

常用属性值 (ItemAlign)：

Auto：使用默认配置。
Start：交叉轴起始位置对齐。
Center：交叉轴居中对齐。
End：交叉轴结束位置对齐。
Stretch：拉伸填充（默认值，如果子组件未设置交叉轴尺寸）。
Baseline：基线对齐。

2. alignContent

作用对象：Flex 容器中的行（Flex Lines）。
生效条件：仅适用于多行 Flex 容器（即设置了 wrap: FlexWrap.Wrap 或 FlexWrap.WrapReverse），且在交叉轴方向上有剩余空间时生效。对单行容器无效。
功能描述：它定义了多行内容作为一个整体，在 Flex 容器交叉轴上的分布和对齐方式。可以将“行”看作是一个整体单位，alignContent 控制这些“行”在容器里的位置。

常用属性值 (FlexAlign)：

Start：所有行堆叠在交叉轴起始位置。
Center：所有行在交叉轴中间紧挨着排列。
End：所有行堆叠在交叉轴结束位置。
SpaceBetween：首行在起始位置，末行在结束位置，中间行均匀分布。
SpaceAround：所有行均匀分布，两端保留一半的间距。
SpaceEvenly：所有行均匀分布，包括两端间距。

3. 核心区别对比

特性	alignItems	alignContent
控制粒度	微观：控制单个子组件在行内的位置	宏观：控制“行”在容器内的位置
单行容器	✅ 生效	❌ 无效
多行容器	✅ 生效（控制子组件在所属行内的对齐）	✅ 生效（控制行与行之间的分布）
类比	像是在操场上排队，教官让每个人在自己的队伍里对齐（比如向左看齐）。	像是操场上有好几个班级的队伍，校长指挥整个班级队伍在操场上的位置（比如所有班级向前靠拢）。

4. 参考文档

ArkUI 的 Flex 布局属性与标准 CSS Flexbox 规范高度一致。为了更直观地理解这两个属性的区别，强烈建议参考 MDN 文档中的交互式示例进行调试和观察。

align-content (MDN): https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/align-content

尝试在文档中切换 align-content 的值，观察多行色块整体位置的变化。注意：必须确保示例处于 flex-wrap: wrap 状态且有多行内容。
align-items (MDN): https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/align-items

尝试切换 align-items 的值，观察色块在蓝色虚线框（行）内的对齐变化。

更多关于HarmonyOS鸿蒙Next中ArkUl Flex容器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼

通过设置alignItems实现子组件在交叉轴上的不同的对齐效果。

// xxx.ets
@Component
struct AlignItemsFlex {
  alignItems : number = 0;
  build() {
    Flex({ alignItems: this.alignItems }) {
      Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
      Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
      Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
    }
    .size({width: '90%', height: 80})
    .padding(10)
    .backgroundColor(0xAFEEEE)
  }
}
@Entry
@Component
struct FlexExample4 {
  build() {
    Column() {
      Column({ space: 5 }) {
        Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignItemsFlex({ alignItems: ItemAlign.Auto }) // 子组件在容器交叉轴上首部对齐
        Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignItemsFlex({ alignItems: ItemAlign.Start }) // 子组件在容器交叉轴上首部对齐
        Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignItemsFlex({ alignItems: ItemAlign.Center }) // 子组件在容器交叉轴上居中对齐
        Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignItemsFlex({ alignItems: ItemAlign.End }) // 子组件在容器交叉轴上尾部对齐
        Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignItemsFlex({ alignItems: ItemAlign.Stretch }) // 子组件在容器交叉轴上拉伸填充
        Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignItemsFlex({ alignItems: ItemAlign.Baseline }) // 子组件在容器交叉轴上与文本基线对齐
      }.width('100%').margin({ top: 5 })
    }.width('100%')
  }
}

通过设置alignContent实现多行内容的不同对齐效果。

// xxx.ets
@Component
struct AlignContentFlex {
  alignContent: number = 0;
  build() {
    Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
      Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
      Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
      Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
    }
    .size({ width: '90%', height: 90 })
    .padding(10)
    .backgroundColor(0xAFEEEE)
  }
}
@Entry
@Component
struct FlexExample5 {
  build() {
    Column() {
      Column({ space: 5 }) {
        Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignContentFlex({ alignContent: FlexAlign.Start }) // 多行布局下子组件首部对齐
        Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignContentFlex({ alignContent: FlexAlign.Center }) // 多行布局下子组件居中对齐
        Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignContentFlex({ alignContent: FlexAlign.End }) // 多行布局下子组件尾部对齐
        Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) // 多行布局下第一行子组件与列首对齐，最后一行子组件与列尾对齐
        Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
        AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) // 多行布局下第一行子组件到列首的距离和最后一行子组件到列尾的距离是相邻行之间距离的一半
        Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({
          wrap: FlexWrap.Wrap,
          alignContent: FlexAlign.SpaceEvenly
        }) { // 多行布局下相邻行之间的距离与第一行子组件到列首的距离、最后一行子组件到列尾的距离完全一样
          Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
          Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
          Text('3').width('50%').height(20).backgroundColor(0xF5DEB3)
          Text('4').width('50%').height(20).backgroundColor(0xD2B48C)
          Text('5').width('50%').height(20).backgroundColor(0xF5DEB3)
        }
        .size({ width: '90%', height: 100 })
        .padding({ left: 10, right: 10 })
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%')
  }
}

eggper 3楼

alignItems 只是设置一行对齐方式，如图：设置成居中是生效的。

如图：

alignContent 使用的话，需要 wrap 来配合，

如图：使用了alignContent : FlexAlign.Center ，不使用 wrap 的情况下：可以看到没啥变化

wrap 设置为 FlexWrap.Wrap ，如图：不但居中显示了，而且还能自动换行，适用于瀑布流。

而且可以通过 wrap 属性，动态控制他如何来显示。

caililin 4楼

1.alignItems（子元素对齐）

功能：统一设置单行内所有子元素在交叉轴上的对齐方式。

2.alignContent（多行分布）

功能：当子元素换行（wrap: FlexWrap.Wrap）时，控制多行整体在交叉轴上的分布间距。

生效条件：必须开启换行且行数≥2。

3.对齐方式说明的可以参考这篇文章：

精通HarmonyOS NEXT Flex对齐：从基础到高级布局技巧

https://developer.huawei.com/consumer/cn/blog/topic/03184025468948080

eggper 5楼

/* 1. alignItems

作用：控制项目（item）在交叉轴上的对齐方式（默认垂直方向）。
影响范围：作用于单行（或单列）内的所有项目。
常见取值：
FlexAlign.Start：沿交叉轴起点对齐（顶部/左侧）。
FlexAlign.Center：居中对齐。
FlexAlign.End：沿交叉轴终点对齐（底部/右侧）。
FlexAlign.Stretch：拉伸填满容器高度/宽度（默认值）。
*/

/*2. alignContent
作用：控制多行项目整体在交叉轴上的分布方式（需配合 wrap 换行使用）。
影响范围：作用于多行（或多列）组成的整体布局。
常见取值：
FlexAlign.Start：多行整体靠交叉轴起点排列。
FlexAlign.Center：多行整体居中。
FlexAlign.End：多行整体靠交叉轴终点排列。
FlexAlign.SpaceBetween：行间均匀分布，首尾贴边。
FlexAlign.SpaceAround：行间均匀分布，每行两侧留空相等。
*/

比如说下面代码：

// 单行布局：alignItems 控制项目垂直居中
Flex({ direction: FlexDirection.Row, alignItems: FlexAlign.Center }) {
  Text('Item1').width(100).height(50)
  Text('Item2').width(100).height(70)
}

// 多行布局：alignContent 控制多行整体居中
Flex({
  direction: FlexDirection.Row,
  wrap: FlexWrap.Wrap,
  alignContent: FlexAlign.Center 
}) {
  Text('Item1').width('100%').height(50)
  Text('Item2').width('100%').height(50)
}

nodeper 6楼

ArkUl Flex容器

ArkUl Flex容器是鸿蒙Next中的弹性布局组件，用于实现灵活的自适应界面。它支持主轴和交叉轴方向排列，通过justifyContent、alignItems等属性控制子组件对齐与分布。Flex容器可嵌套使用，结合flexGrow、flexShrink、flexBasis属性管理子组件尺寸伸缩。适用于需要动态调整布局的场景，如列表、网格和卡片式设计。

phonegap100 7楼

在ArkUI的Flex容器布局中，alignItems和alignContent都是用于控制交叉轴（与主轴垂直的方向）对齐方式的属性，但它们的应用场景和作用范围有本质区别。

1. alignItems

作用对象：作用于单行（或单列）内的所有子组件。
核心功能：控制当前行（或列）中的子组件在交叉轴上如何对齐。
常用值：
- FlexAlign.Start：子组件向交叉轴的起点对齐。
- FlexAlign.Center：子组件在交叉轴上居中对齐。
- FlexAlign.End：子组件向交叉轴的终点对齐。
- FlexAlign.Stretch（默认值）：子组件在交叉轴上拉伸填满容器（前提是子组件未设置交叉轴尺寸）。
适用场景：无论Flex容器是单行还是多行，alignItems都有效。它决定了每一行内部作为一个整体在交叉轴上的对齐方式。

2. alignContent

作用对象：作用于Flex容器的所有行（当flexWrap设置为FlexWrap.Wrap且存在多行时）。
核心功能：当交叉轴上存在剩余空间时，控制多行（或列）作为一个整体在交叉轴上的分布和对齐方式。如果只有一行，此属性无效。
常用值：
- FlexAlign.Start：所有行向交叉轴的起点紧挨着排列。
- FlexAlign.Center：所有行作为一个整体在交叉轴上居中对齐。
- FlexAlign.End：所有行向交叉轴的终点紧挨着排列。
- FlexAlign.SpaceBetween：第一行贴起点，最后一行贴终点，剩余行在中间均匀分布。
- FlexAlign.SpaceAround：所有行在交叉轴上均匀分布，每行两侧的间隔相等。
- FlexAlign.SpaceEvenly：所有行在交叉轴上完全均匀分布，包括起点和终点两侧的间隔。
适用场景：仅在多行布局且交叉轴有剩余空间时生效，用于调整行与行之间的间距和对齐。

关键区别总结：

控制层级不同：alignItems控制行内子组件的对齐，alignContent控制行间的对齐与分布。
生效条件不同：alignItems始终有效；alignContent仅在多行/列布局且交叉轴有剩余空间时才有效果。
影响对象不同：alignItems影响子组件；alignContent影响由子组件组成的“行”。

简单来说，alignItems管的是每一行“内部”的站队方式，而alignContent管的是所有“行”这个队伍在容器里整体的排布位置。