概念

弹性布局（Flex）容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

布局方向

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

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

弹性布局方向图

布局换行

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

FlexWrap. NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。

FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。

FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。

主轴对齐方式

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

交叉轴对齐方式

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

容器组件设置交叉轴对齐

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

    //ItemAlign.Auto：使用Flex容器中默认配置
    // ItemAlign.Start：交叉轴方向首部对齐
    // ItemAlign.Center：交叉轴方向居中对齐
    // ItemAlign.End：交叉轴方向底部对齐
    // ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸
    // ItemAlign. Baseline：交叉轴方向文本基线对齐
    Flex({ alignItems: ItemAlign.Baseline }) {
      Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
      Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
      Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
    }
    .width('100%')
    .height(80)
    .padding(10)
    .backgroundColor(0xAFEEEE)

子元素设置交叉轴对齐

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

    // 容器组件设置子元素居中
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {

      Text('alignSelf Start').width('25%').height(80)
        .alignSelf(ItemAlign.Start)
        .backgroundColor(0xF5DEB3)
      Text('alignSelf Baseline')
        .alignSelf(ItemAlign.Baseline)
        .width('25%')
        .height(80)
        .backgroundColor(0xD2B48C)
      Text('alignSelf Baseline').width('25%').height(100)
        .backgroundColor(0xF5DEB3)
        .alignSelf(ItemAlign.Baseline)
      Text('no alignSelf').width('25%').height(100)
        .backgroundColor(0xD2B48C)
      Text('no alignSelf').width('25%').height(100)
        .backgroundColor(0xF5DEB3)

    }.width('90%').height(220).backgroundColor(0xAFEEEE)

上例中，Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义。

内容对齐

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

    // FlexAlign.Start：子元素各行与交叉轴起点对齐。
    // FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
    // FlexAlign.End：子元素各行与交叉轴终点对齐。
    // FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
    // FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
    // FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap,
      alignContent: FlexAlign.SpaceEvenly }) {
      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
    }
    .width('90%')
    .height(100)
    .backgroundColor(0xAFEEEE)
  }

自适应拉伸

在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。

flexBasis：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。

flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。

flexShrink: 当父容器空间不足时，子元素的压缩比例。