1 主要内容说明

在 Flex 布局中，元素会根据容器的设置自动调整位置。例如，元素可以在主轴上按不同的对齐方式排列，如从左到右或从右到左，也可以调整元素之间的间距，确保布局的美观性。通过控制元素在交叉轴（与主轴垂直）上的对齐方式，可以让它们在容器中垂直居中或伸展以适应容器高度。
Flex 布局还支持换行，当容器的空间不够时，元素会自动换行或列出。通过适当配置，可以精确控制每个元素的大小、位置和间距。我们可以轻松实现各种复杂的布局，而不必担心元素会被挤到容器外或错位。
Flex 布局是为了应对现代网页和应用中动态、响应式的布局需求，它能高效地让我们处理元素的排列、对齐和分布问题。

2 相关内容

2.1 Flex弹性布局的方向

内容	说明
FlexDirection.Row	水平从左到右排列子元素（默认方向）。适合横向排列子项，类似于一行的布局。
FlexDirection.RowReverse	水平从右到左排列子元素。可以用于右对齐的横向排列，元素逆序显示。
FlexDirection.Column	垂直从上到下排列子元素。适合纵向布局，类似于一列的排列。
FlexDirection.ColumnReverse	垂直从下到上排列子元素。用于倒序的纵向排列。

2.1.1 源码1的简答说明

• Flex 容器：使用 Flex 布局来排列子元素，设置了横向反转排列（RowReverse）。容器高度为 60%，宽度为 100%，背景色为半透明青色。
• 文本组件：遍历数组 arr 中的三个字符串，每个字符串生成一个 Text 组件。设置文本组件的宽高、背景色、边框、字体大小、对齐方式等样式，并添加了圆角、背景图片及其尺寸配置。

2.1.2 源码1 （Flex弹性布局的方向）

@Entry
@Component
struct PageFlex {

  // 定义一个字符串数组，包含了三个组件的名字
  arr: string[] = ["组件1", "组件2", "组件3"]

  // 构建页面的方法
  build() {
    // 创建一个 Flex 布局容器
    Flex({
      // 设置布局方向为 RowReverse（横向反转排列）
      direction: FlexDirection.RowReverse
      // 其他布局方向选项（已注释）：
      // FlexDirection.Row: 横向排列
      // FlexDirection.Column: 纵向排列
      // FlexDirection.ColumnReverse: 纵向反转排列
    }) {
      // 遍历字符串数组 arr
      ForEach(
        this.arr,
        (str: string) => {
          // 为每个字符串创建一个 Text 组件
          Text(str)
            .width(80)                       // 设置宽度为 80
            .height(80)                      // 设置高度为 80
            .backgroundColor("#ff64dd4d")    // 设置背景颜色为半透明绿色
            .border({ width: 1 })            // 设置边框宽度为 1
            .borderColor("blue")             // 设置边框颜色为蓝色
            .textAlign(TextAlign.Center)     // 设置文本居中对齐
            .fontSize(30)                    // 设置字体大小为 30
            .borderRadius(40)                // 设置边框圆角为 40
            .backgroundImage($r("app.media.xiaowoniu")) // 设置背景图片
            .backgroundImageSize({ width: 80, height: 80 }) // 设置背景图片尺寸
            .fontColor("green")              // 设置字体颜色为绿色
        }
      )
    }
    // 设置 Flex 容器的高度为 60%，宽度为 100%
    .height('60%')
    .width('100%')
    .backgroundColor("#ff4dd7ac")           // 设置 Flex 容器背景颜色为半透明青色
  }
}

2.1.3 源码1运行效果

2.1.3.1 当direction: FlexDirection.RowReverse

2.1.3.2 当direction: FlexDirection.Row

2.1.2.3 当direction: FlexDirection.ColumnReverse

2.1.2.4 当direction: FlexDirection.Column

2.2 Flex主轴的对齐方式

在 ArkUI 的 Flex 布局中，justifyContent 属性用于设置子组件在主轴（主排列方向）上的对齐方式。不同的 FlexAlign 枚举值决定了子组件在主轴方向上如何排列。下面是各个参数的说明：

枚举	说明
FlexAlign.Start	子组件从主轴的起始位置（左或上）开始排列，紧贴在一起。
FlexAlign.Center	子组件在主轴方向居中排列。
FlexAlign.End	子组件从主轴的结束位置（右或下）排列。
FlexAlign.SpaceBetween	子组件在主轴方向上均匀分布，第一个子组件紧贴起始位置，最后一个子组件紧贴结束位置。
FlexAlign.SpaceAround	子组件在主轴方向上均匀分布，每个组件两侧留有相等的空间，整体空间略小于 SpaceEvenly。
FlexAlign.SpaceEvenly	子组件在主轴方向上均匀分布，每个组件之间以及与容器边缘的距离相等。

2.2.1 源码2简单说明

使用了 justifyContent 属性设置子组件在容器中的对齐方式为 SpaceBetween，即子组件均匀分布在两端。

• mes 扩展方法：通过 @Extend(Text) 创建了 mes 方法来统一设置 Text 组件的样式。样式包括文本宽高、背景色、边框、文本对齐、字体大小、圆角、背景图片及其大小等。

2.2.2 源码2（Flex主轴的对齐方式）

import { text } from '@kit.ArkGraphics2D'

@Entry
@Component
struct PageFlex {

  // 定义一个字符串数组，包含了三个组件的名字
  arr: string[] = ["组件1", "组件2", "组件3"]

  // 构建页面的方法
  build() {
    // 创建一个 Flex 布局容器
    Flex({
      direction: FlexDirection.Row,
      // 设置子组件的对齐方式为两端对齐
      justifyContent: FlexAlign.SpaceBetween,
      // 其他对齐选项（已注释）：
      // FlexAlign.Start: 从左侧开始对齐
      // FlexAlign.Center: 居中对齐
      // FlexAlign.End: 从右侧对齐
      // FlexAlign.SpaceAround: 子元素之间均匀分布，带边距
      // FlexAlign.SpaceEvenly: 子元素之间均匀分布，不带边距
    }) {
      // 遍历字符串数组 arr
      ForEach(
        this.arr,
        (str: string) => {
          // 为每个字符串创建一个 Text 组件，调用 mes 方法设置样式
          Text(str)
            .mes()
        }
      )
    }
    // 设置 Flex 容器的高度为 60%，宽度为 100%
    .height('60%')
    .width('100%')
    .backgroundColor("#ff4dd7ac")           // 设置 Flex 容器背景颜色为半透明青色
  }
}

// 扩展 Text 组件的 mes 方法来统一设置样式
@Extend(Text)
function mes() {
  .width(80)                       // 设置宽度为 80
  .height(80)                      // 设置高度为 80
  .backgroundColor("#ff64dd4d")    // 设置背景颜色为半透明绿色
  .border({ width: 1 })            // 设置边框宽度为 1
  .borderColor("blue")             // 设置边框颜色为蓝色
  .textAlign(TextAlign.Center)     // 设置文本居中对齐
  .fontSize(30)                    // 设置字体大小为 30
  .borderRadius(40)                // 设置边框圆角为 40
  .backgroundImage($r("app.media.xiaowoniu")) // 设置背景图片
  .backgroundImageSize({ width: 80, height: 80 }) // 设置背景图片尺寸
  .fontColor("green")              // 设置字体颜色为绿色
}

2.2.3 源码2运行效果

2.2.3.1 当justifyContent: FlexAlign.SpaceBetween，

2.2.3.2 当justifyContent: FlexAlign.SpaceAround，

2.2.3.3 当justifyContent: FlexAlign.SpaceEvenly，

2.2.3.4 当justifyContent: FlexAlign.End，

2.2.3.5 当justifyContent: FlexAlign.Center，

2.2.3.6 当justifyContent: FlexAlign.Start，

2.3 Flex交叉轴的对齐方式

alignItems 用于设置子组件在控制交叉轴对齐方式属性。不同的 ItemAlign枚举值决定了子组件在交叉轴方向上如何排列。下面是各个参数的说明：

内容	说明
ItemAlign.Auto	默认自动对齐，通常情况下由布局或父组件控制。
ItemAlign.Start	子组件在交叉轴（垂直方向）上从起始边对齐（通常是顶部对齐）。
ItemAlign.Center	子组件在交叉轴上居中对齐，使它们位于容器垂直方向的中央。
ItemAlign.End	子组件在交叉轴上从结束边对齐（通常是底部对齐）。
ItemAlign.Baseline	子组件按照其文本的基线对齐，适合包含文本内容的组件，确保文字在视觉上对齐。
ItemAlign.Stretch	子组件沿交叉轴方向拉伸，填满容器的交叉轴区域。

2.3.1 源码3的简单说明

这段代码通过 ArkUI 的 Flex 布局在页面中创建了一排文本组件，使用 justifyContent 控制主轴对齐方式，alignItems 控制交叉轴对齐方式。

• alignItems: ItemAlign.Center 后需要逗号，避免语法错误。

2.3.2 源码3（shift方法）

import { text } from '@kit.ArkGraphics2D'

@Entry
@Component
struct PageFlex {

  // 定义一个字符串数组，包含了三个组件的名字
  arr: string[] = ["组件1", "组件2", "组件3"]

  // 构建页面的方法
  build() {
    // 创建一个 Flex 布局容器
    Flex({
      direction: FlexDirection.Row,
      // 设置主轴方向为两端均匀分布
      justifyContent: FlexAlign.SpaceEvenly,
      // 设置交叉轴方向居中对齐
      alignItems: ItemAlign.Center,
      // 其他对齐选项（已注释）：
      // ItemAlign.Auto: 默认自动对齐
      // ItemAlign.Start: 从交叉轴的起始边对齐
      // ItemAlign.End: 从交叉轴的结束边对齐
      // ItemAlign.Baseline: 根据文本基线对齐
      // ItemAlign.Stretch: 拉伸填满交叉轴
    }) {
      // 遍历字符串数组 arr
      ForEach(
        this.arr,
        (str: string) => {
          // 为每个字符串创建一个 Text 组件，调用 mes 方法设置样式
          Text(str)
            .mes()
        }
      )
    }
    // 设置 Flex 容器的高度为 60%，宽度为 100%
    .height('60%')
    .width('100%')
    .backgroundColor("#ff4dd7ac")           // 设置 Flex 容器背景颜色为半透明青色
  }
}

// 扩展 Text 组件的 mes 方法来统一设置样式
@Extend(Text)
function mes() {
  .width(80)                       // 设置宽度为 80
  .height(80)                      // 设置高度为 80
  .backgroundColor("#ff64dd4d")    // 设置背景颜色为半透明绿色
  .border({ width: 1 })            // 设置边框宽度为 1
  .borderColor("blue")             // 设置边框颜色为蓝色
  .textAlign(TextAlign.Center)     // 设置文本居中对齐
  .fontSize(30)                    // 设置字体大小为 30
  .borderRadius(40)                // 设置边框圆角为 40
  .backgroundImage($r("app.media.xiaowoniu")) // 设置背景图片
  .backgroundImageSize({ width: 80, height: 80 }) // 设置背景图片尺寸
  .fontColor("green")              // 设置字体颜色为绿色
}

2.3.3 源码3运行效果

2.3.3.1 当alignItems: ItemAlign.Center,

2.3.3.2 当alignItems: ItemAlign.Start,

2.3.3.3 当alignItems: ItemAlign.End,

2.3.3.4 当alignItems: ItemAlign.Stretch,

2.4 Flex布局的换行

布局换行的相关参数如下：

项目	Value
FlexWrap.NoWrap	子组件不换行，所有组件会放置在同一行或列上，可能导致内容超出容器边界。
FlexWrap.Wrap	子组件按容器边界自动换行。
FlexWrap.WrapReverse	与 Wrap 类似，但新行会显示在前一行的上方（或左侧），即反转排列顺序。

2.4.1 源码4的相关说明

创建了一个主轴方向为 Row 的水平 Flex 布局。主轴对齐方式：使用 justifyContent:FlexAlign.SpaceBetween，在主轴方向上让组件两端对齐，组件之间均匀分布。换行方式：设置 wrap: FlexWrap.Wrap，组件在边界处自动换行。

2.4.2 源码4（Flex布局的换行）

import { text } from '@kit.ArkGraphics2D'

@Entry
@Component
struct PageFlex {

  // 定义一个字符串数组，包含了多个组件的名字
  arr: string[] = ["组件1", "组件2", "组件3", "组件4", "组件5", "组件6", "组件7", "组件8", "组件9", "组件10"]

  // 构建页面的方法
  build() {
    // 创建一个 Flex 布局容器
    Flex({
      direction: FlexDirection.Row,
      // 设置主轴方向为两端均匀分布
      justifyContent: FlexAlign.SpaceBetween,
      // 设置交叉轴方向居中对齐
      // alignItems: ItemAlign.Center,
      // 设置子组件换行
      wrap: FlexWrap.Wrap,
      // 其他选项（已注释）：
      // FlexWrap.NoWrap: 不换行，所有组件在一行内显示
      // FlexWrap.WrapReverse: 组件换行但方向反转
    }) {
      // 遍历字符串数组 arr
      ForEach(
        this.arr,
        (str: string) => {
          // 为每个字符串创建一个 Text 组件，调用 mes 方法设置样式
          Text(str)
            .mes()
        }
      )
    }
    // 设置 Flex 容器的高度为 60%，宽度为 100%
    .height('60%')
    .width('100%')
    .backgroundColor("#ff4dd7ac")           // 设置 Flex 容器背景颜色为半透明青色
  }
}

// 扩展 Text 组件的 mes 方法来统一设置样式
@Extend(Text)
function mes() {
  .width(80)                       // 设置宽度为 80
  .height(80)                      // 设置高度为 80
  .backgroundColor("#ff64dd4d")    // 设置背景颜色为半透明绿色
  .border({ width: 1 })            // 设置边框宽度为 1
  .borderColor("blue")             // 设置边框颜色为蓝色
  .textAlign(TextAlign.Center)     // 设置文本居中对齐
  .fontSize(30)                    // 设置字体大小为 30
  .borderRadius(40)                // 设置边框圆角为 40
  .backgroundImage($r("app.media.xiaowoniu")) // 设置背景图片
  .backgroundImageSize({ width: 80, height: 80 }) // 设置背景图片尺寸
  .fontColor("green")              // 设置字体颜色为绿色
}

2.4.3 源码4运行效果

2.4.3.1 当wrap: FlexWrap.Wrap,

2.4.3.2 当wrap: FlexWrap.WrapReverse,

2.4.3.3 当wrap: FlexWrap.NoWrap,

2.5 换行后单独设置交叉轴的子组件

如果在 Flex 布局容器中启用了换行（wrap: FlexWrap.Wrap 或 wrap: FlexWrap.WrapReverse），那么 alignItems: ItemAlign.Center 可能会失效。因为，alignItems 是用来设置 主容器 中的 子项 在交叉轴上的对齐方式的（例如，垂直对齐）。当启用 换行（wrap） 时，子项可能会分为多行或多列排列。在这种情况下，如alignItems: ItemAlign.Center 仅会影响第一行或第一列的子项，其他行或列的子项则不会受此影响。如果希望每行/列的子项都在交叉轴上居中对齐，可以通过设置每个子项的 alignSelf 来单独控制每个子项的对齐方式，而不是依赖于 alignItems。

2.5.1 源码5的相关说明

• Text(“组件1”) ------ 第一个文本组件，通过 alignSelf(ItemAlign.Stretch) 在交叉轴方向上拉伸以填满容器。
• Text(“组件2”) ------ 第二个文本组件，通过 alignSelf(ItemAlign.Center) 在交叉轴上居中对齐。
• Text(“组件3”) ------ 第三个文本组件，通过 alignSelf(ItemAlign.End) 在交叉轴上对齐到容器的末尾。

2.5.2 源码5（换行后单独设置交叉轴的子组件）

import { text } from '@kit.ArkGraphics2D'

@Entry
@Component
struct PageFlex {

  // 构建页面的方法
  build() {
    // 创建一个 Flex 布局容器
    Flex() {

      // 创建第一个文本组件，并设置它在交叉轴上拉伸以填满容器
      Text("组件1").mes()
        .alignSelf(ItemAlign.Stretch) // 交叉轴方向拉伸填充容器

      // 创建第二个文本组件，并设置它在交叉轴上居中对齐
      Text("组件2").mes()
        .alignSelf(ItemAlign.Center)  // 交叉轴方向居中对齐

      // 创建第三个文本组件，并设置它在交叉轴上对齐到末尾
      Text("组件3").mes()
        .alignSelf(ItemAlign.End)     // 交叉轴方向对齐到末尾

    }
    // 设置 Flex 容器的高度为 60%，宽度为 100%
    .height('60%')
    .width('100%')
    .backgroundColor("#ff4dd7ac")           // 设置 Flex 容器背景颜色为半透明青色
  }
}

// 扩展 Text 组件的 mes 方法来统一设置样式
@Extend(Text)
function mes() {
  .width(80)                       // 设置文本框宽度为 80
  .height(80)                      // 设置文本框高度为 80
  .backgroundColor("#ff64dd4d")    // 设置背景颜色为半透明绿色
  .border({ width: 1 })            // 设置边框宽度为 1
  .borderColor("blue")             // 设置边框颜色为蓝色
  .textAlign(TextAlign.Center)     // 设置文本居中对齐
  .fontSize(30)                    // 设置字体大小为 30
  .borderRadius(40)                // 设置边框圆角为 40
  .backgroundImage($r("app.media.xiaowoniu")) // 设置背景图片
  .backgroundImageSize({ width: 80, height: 80 }) // 设置背景图片尺寸
  .fontColor("green")              // 设置字体颜色为绿色
}

2.5.3 源码5的运行效果

2.5.3.1 设置alignSelf 属性时如下

2.5.3.2 不设置alignSelf 属性时，对照组如下

3.结语

flex弹性布局和前面的row、column的对齐方式的博文内容有许多类似的地方，如主轴的参数和设置基本一样。有些许不同的是交叉轴的命名使用方式，但基本参数都有相同的，可以类比。不同的，如flex弹性布局多了像拉伸这样的属性值。可以多对比一下注意区分。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

2024-11-8；
22:07；