弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。 容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

主轴为水平方向的Flex容器示意图

• 主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
• 交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

弹性布局方向图

Flex({ direction: FlexDirection.Row }) {
  Text('1').width('33%').height(50).backgroundColor('#F5DEB3')
  Text('2').width('33%').height(50).backgroundColor('#D2B48C')
  Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor('#AFEEEE')

direction设置不同值的含义

• FlexDirection.Row：（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。
• FlexDirection.RowReverse：主轴为水平方向，子元素从终点端沿着FlexDirection.Row相反的方向开始排布。
• FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。
• FlexDirection.ColumnReverse：主轴为垂直方向，子元素从终点端沿着FlexDirection.Column相反的方向开始排布。

布局换行

弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

Flex({ wrap: FlexWrap.NoWrap }) {
  Text('1').width('50%').height(50).backgroundColor('#F5DEB3')
  Text('2').width('50%').height(50).backgroundColor('#D2B48C')
  Text('3').width('50%').height(50).backgroundColor('#F5DEB3')
} 
.width('90%')
.padding(10)
.backgroundColor('#AFEEEE')

wrap设置不同值的含义

• FlexWrap.NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
• FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。
• FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。

主轴对齐方式

通过justifyContent参数设置子元素在主轴方向的对齐方式。

Flex({ justifyContent: FlexAlign.Start }) {  
  Text('1').width('20%').height(50).backgroundColor('#F5DEB3')
  Text('2').width('20%').height(50).backgroundColor('#D2B48C')    
  Text('3').width('20%').height(50).backgroundColor('#F5DEB3')
}
.width('90%')
.padding({ top: 10, bottom: 10 })
.backgroundColor('#AFEEEE')

justifyContent设置不同值的含义

• FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
• FlexAlign.Center：子元素在主轴方向居中对齐。
• FlexAlign.End：子元素在主轴方向终点端对齐，最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
• FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
• FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。
• FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。

交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

容器组件设置交叉轴对齐

可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。

• ItemAlign.Auto：使用Flex容器中默认配置。
• ItemAlign.Start：交叉轴方向首部对齐。
• ItemAlign.Center：交叉轴方向居中对齐。
• ItemAlign.End：交叉轴方向底部对齐。
• ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
• ItemAlign.Baseline：交叉轴方向文本基线对齐。

子元素设置交叉轴对齐

子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐方式，且会覆盖Flex布局容器中alignItems配置。

内容对齐

可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：

• FlexAlign.Start：子元素各行与交叉轴起点对齐。
• FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
• FlexAlign.End：子元素各行与交叉轴终点对齐。
• FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
• FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
• FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。

使用Flex实现搜索记录自动换行

我们可以根据Flex自动换行特性实现一个搜索记录页面，因为搜索内容是由用户输入，具体多长无法确定，一行显示多少条记录是由搜索内容排列显示。若由我们自己来测量计算，会非常麻烦，而使用Flex的自动换行特性，就非常简单了，示例如下

@Entry
@Component
struct Index {
  items: string[] = ["搜索1", "搜索222", "搜索33333333", "搜索a", "搜索b", "搜索c", "搜索d", "搜索44444", "搜索55555", "搜索666666"]

  build() {
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
      ForEach(this.items, (item: string) => {
        Text(item)
          .height(32)
          .padding({ left: 16, right: 16 })
          .margin(8)
          .borderRadius(24)
          .backgroundColor('#DDDDDD')
      })
    }
    .height('100%')
    .width('100%')
  }
}