弹性布局 (Flex)
===========

#### 概述

弹性布局（[Flex](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex)）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ca/v3/H7SFaXuJQo68SJ-nx-FXDA/zh-cn_image_0000002594827782.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=16F1BE5804DED06836722B11D37601CDCB3C1609B2276B0C1CB62B355FDC062F)

#### 基本概念

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

#### 布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置[FlexOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex#flexoptions对象说明)的参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

**图2** 弹性布局方向图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d8/v3/96mRl5_wTvyRxReykwHfEg/zh-cn_image_0000002625187229.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=D8FC607E7F3C284EAC477E8B68A37B8A64F541A704FD650A778D9E5D982B954A)

*   FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。
    
    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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4a/v3/ygXLZd4ETYOzxGMxuwweTg/zh-cn_image_0000002625107373.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=68B9CF13F6025B068C4378BED48B2977867F786798911EAD048CC8F8DBEAC61B)
    
*   FlexDirection.RowReverse：主轴为水平方向，子元素从终点端沿着FlexDirection.Row相反的方向开始排布。
    
    Flex({ direction: FlexDirection.RowReverse }) {
      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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/91/v3/bgRsIAN4SGOOGm3mtzTiYw/zh-cn_image_0000002594667856.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=389BC5A039F421337C6131D186D295FA671D20E51D9E469A4A45DA7AB694DF27)
    
*   FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。
    
    Flex({ direction: FlexDirection.Column }) {
      Text('1').width('100%').height(50).backgroundColor('#F5DEB3')
      Text('2').width('100%').height(50).backgroundColor('#D2B48C')
      Text('3').width('100%').height(50).backgroundColor('#F5DEB3')
    }
    .height(70)
    .width('90%')
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c6/v3/wHuS1uiORnycBP7DvZFXAw/zh-cn_image_0000002594827784.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=8F4F36F2ED27787CA91B25C0638E2C2D3F488478A739A4B1C71F7F3263BB3914)
    
*   FlexDirection.ColumnReverse：主轴为垂直方向，子元素从终点端沿着FlexDirection.Column相反的方向开始排布。
    
    Flex({ direction: FlexDirection.ColumnReverse }) {
      Text('1').width('100%').height(50).backgroundColor('#F5DEB3')
      Text('2').width('100%').height(50).backgroundColor('#D2B48C')
      Text('3').width('100%').height(50).backgroundColor('#F5DEB3')
    }
    .height(70)
    .width('90%')
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5/v3/d6jeYaqBTs-kJaFCRRgrDg/zh-cn_image_0000002625187231.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=4DB7A7E4C76CFF79376968306FF1B80E72431C03AAAD63FB920A03BEBEB76DDB)
    

#### 布局换行

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

*   FlexWrap.NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
    
    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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c7/v3/m-5DpKjEQEa0abTS92BRaw/zh-cn_image_0000002625107375.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=BF2FE666FA82B978105E055EF83F734DE95D34834C5E857D8F1D484286AC3210)
    
*   FlexWrap.Wrap：换行，每一行子元素按照主轴方向排列。
    
    Flex({ wrap: FlexWrap.Wrap }) {
      Text('1').width('50%').height(50).backgroundColor('#F5DEB3')
      Text('2').width('50%').height(50).backgroundColor('#D2B48C')
      Text('3').width('50%').height(50).backgroundColor('#D2B48C')
    }
    .width('90%')
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/45/v3/SL82U1F4Ty24VDJbpL9Onw/zh-cn_image_0000002594667858.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=5E5DCA6A6BF9FCE31ABA73A4C209EE628B35177489AA224A82DD06EDC0155EB1)
    
*   FlexWrap.WrapReverse：换行，每一行子元素按照主轴反方向排列。
    
    Flex({ wrap: FlexWrap.WrapReverse}) {
      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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/15/v3/xxulyoP_RpWw7YdgW104yQ/zh-cn_image_0000002594827786.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=2507207CD66E02E4CCD31F396553A9BC999AFBD1E289927E0D3F000FB86C46EF)
    

#### 主轴对齐方式

通过[justifyContent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex#flexoptions对象说明)参数设置子元素在主轴方向的对齐方式。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2/v3/uyg48D-fQZSnKIDLsgAL4w/zh-cn_image_0000002625187233.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=226A21494963BD88894F0105F5B70F3DAF248E8133648BC1A425A2268A452178)

*   FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
    
    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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a4/v3/Iwg-x4CcRPG_r6h4g6MMXw/zh-cn_image_0000002625107377.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=AB8409E7F0BAF41CC669CCD645C1E0FF7F2C9DAB1DF707D81699286B9149159B)
    
*   FlexAlign.Center：子元素在主轴方向居中对齐。
    
    Flex({ justifyContent: FlexAlign.Center }) {
      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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7/v3/4oqXKa-LS9Sve2lBNBulng/zh-cn_image_0000002594667860.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=A6C27B292FAE62FC39CD1AA763486FF402A688C953A080EB5B7C64947404F7C2)
    
*   FlexAlign.End：子元素在主轴方向终点端对齐，最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
    
    Flex({ justifyContent: FlexAlign.End }) {
      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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2c/v3/O--068jJR8S1PRoOGwxmcA/zh-cn_image_0000002594827788.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=C4ACBA6F0234403FA9A32A1F9856C5BBF08D1398781C1C751C26665A115536B1)
    
*   FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
    
    Flex({ justifyContent: FlexAlign.SpaceBetween }) {
      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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d6/v3/p98EH6jIR2u85hyn0h-fJA/zh-cn_image_0000002625187235.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=E10DD472D0EB22F70ED96A0980A1E6EB39D184D4E7F7374A01284D8796ED3FC7)
    
*   FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。
    
    Flex({ justifyContent: FlexAlign.SpaceAround }) {
      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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/19/v3/dUn-I9h5RAm55ZtR12fkkw/zh-cn_image_0000002625107379.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=924985E341AA54454750C76F0CD58FA983A6193A81C574D075649FD594101334)
    
*   FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。
    
    Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
      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')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/42/v3/G35LhyFDTRmxB1Ng5tGNXQ/zh-cn_image_0000002594667862.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=9B179E8FF2C927BF5C4BE5C3902CF33E27488599BBDD258573F103207488DF2F)
    

#### 交叉轴对齐方式

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

#### \[h2\]容器组件设置交叉轴对齐

可以通过设置[FlexOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex#flexoptions对象说明)的参数alignItems，设置子元素在交叉轴的对齐方式。

*   ItemAlign.Auto：使用Flex容器中默认配置。
    
    Flex({ alignItems: ItemAlign.Auto }) {
      Text('1').width('33%').height(30).backgroundColor('#F5DEB3')
      Text('2').width('33%').height(40).backgroundColor('#D2B48C')
      Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
    }
    .size({ width: '90%', height: 80 })
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b4/v3/ficXgNZFRVmIltGegfhalw/zh-cn_image_0000002594827790.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=C7B026658C732A0DAEAFF18129AB904D9D869115B247D6276165E5F2EAFB0D6F)
    
*   ItemAlign.Start：交叉轴方向首部对齐。
    
    Flex({ alignItems: ItemAlign.Start }) {
      Text('1').width('33%').height(30).backgroundColor('#F5DEB3')
      Text('2').width('33%').height(40).backgroundColor('#D2B48C')
      Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
    }
    .size({ width: '90%', height: 80 })
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5d/v3/QJOgdje6RX6MzextXEpVYw/zh-cn_image_0000002625187237.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=3390F673A127EC15C14C545FDC7EB085693EDA375FCCE25B8CF7439E443A2F55)
    
*   ItemAlign.Center：交叉轴方向居中对齐。
    
    Flex({ alignItems: ItemAlign.Center }) {
      Text('1').width('33%').height(30).backgroundColor('#F5DEB3')
      Text('2').width('33%').height(40).backgroundColor('#D2B48C')
      Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
    }
    .size({ width: '90%', height: 80 })
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/90/v3/r0ydusb1QgquvuxrkZyFFQ/zh-cn_image_0000002625107381.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=8D600881CB9F05B3B8F7AEAB780B0DB37CD07A92142C3077D608308FF17BC067)
    
*   ItemAlign.End：交叉轴方向底部对齐。
    
    Flex({ alignItems: ItemAlign.End }) {
      Text('1').width('33%').height(30).backgroundColor('#F5DEB3')
      Text('2').width('33%').height(40).backgroundColor('#D2B48C')
      Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
    }
    .size({ width: '90%', height: 80 })
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/64/v3/jqfLM3HcTMyUgLv5qjYakg/zh-cn_image_0000002594667864.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=835BDB7C40C45E6E7AF1D9A643F26E31077D54032FE19AB99CAB0F3C61B4411E)
    
*   ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。元素在Flex容器中，沿交叉轴方向拉伸填充。容器为Flex且设置[FlexWrap](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#flexwrap)为FlexWrap.Wrap或FlexWrap.WrapReverse时，元素拉伸到与当前行或列交叉轴长度最长的元素尺寸。其余情况下，无论元素尺寸是否设置，均拉伸到容器尺寸。
    
    Flex({ alignItems: ItemAlign.Stretch }) {
      Text('1').width('33%').backgroundColor('#F5DEB3')
      Text('2').width('33%').backgroundColor('#D2B48C')
      Text('3').width('33%').backgroundColor('#F5DEB3')
    }
    .size({ width: '90%', height: 80 })
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f4/v3/rY1XSN-iTTi9_toX-Rod0w/zh-cn_image_0000002594827792.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=A20ECBECBBDD6B10263A62B08C235BD8A18E80649D51ED0C3442B08CFB15635E)
    
*   ItemAlign.Baseline：交叉轴方向文本基线对齐。
    
    Flex({ alignItems: ItemAlign.Baseline }) {
      Text('1').width('33%').height(30).backgroundColor('#F5DEB3')
      Text('2').width('33%').height(40).backgroundColor('#D2B48C')
      Text('3').width('33%').height(50).backgroundColor('#F5DEB3')
    }
    .size({ width: '90%', height: 80 })
    .padding(10)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e4/v3/JUFKMKuqT6GSGGKXXEDpKQ/zh-cn_image_0000002625187239.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=A63766CBC0EAF195965645DB1D7289F42579CF7E5D1C0925C41CA342C810758E)
    

#### \[h2\]子元素设置交叉轴对齐

子元素的[alignSelf](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-flex-layout#alignself)属性也可以设置子元素在父容器交叉轴的对齐方式，且会覆盖Flex布局容器中alignItems配置。如下例所示：

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子元素居中
  Text('alignSelf Start').width('25%').height(80)
    .alignSelf(ItemAlign.Start)
    .backgroundColor('#F5DEB3')
  Text('alignSelf Baseline')
    .alignSelf(ItemAlign.Baseline)
    .width('25%')
    .height(80)
    .backgroundColor('#D2B48C')
  Text('alignSelf Baseline').width('25%').height(100)
    .backgroundColor('#F5DEB3')
    .alignSelf(ItemAlign.Baseline)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor('#D2B48C')
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor('#F5DEB3')

}.width('90%').height(220).backgroundColor('#AFEEEE')

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/03/v3/-SxRz-yjQi-l2aX6oBYXhQ/zh-cn_image_0000002625107383.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=DB88535B1844972025CC9F8EA3E85F66C4FFE519644E39E7E35BD83E7B90E4AC)

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

#### \[h2\]内容对齐

可以通过[alignContent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex#flexoptions对象说明)参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：

*   FlexAlign.Start：子元素各行与交叉轴起点对齐。
    
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
      Text('1').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('2').width('60%').height(20).backgroundColor('#D2B48C')
      Text('3').width('40%').height(20).backgroundColor('#D2B48C')
      Text('4').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('5').width('20%').height(20).backgroundColor('#D2B48C')
    }
    .width('90%')
    .height(100)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cd/v3/IYFqbg_qSuO28_yKxRsmXA/zh-cn_image_0000002594667866.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=8B6625D3517F280DBC838C4829A7800B3BDDC060C8BADF6BF424BCD557091550)
    
*   FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
    
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
      Text('1').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('2').width('60%').height(20).backgroundColor('#D2B48C')
      Text('3').width('40%').height(20).backgroundColor('#D2B48C')
      Text('4').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('5').width('20%').height(20).backgroundColor('#D2B48C')
    }
    .width('90%')
    .height(100)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5c/v3/LVbOjHiYQkSmmhItVRDq-A/zh-cn_image_0000002594827794.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=C34FB5976F56B652144C5C61C9F5DF40FFD90E5470D126F90541A1490605A321)
    
*   FlexAlign.End：子元素各行与交叉轴终点对齐。
    
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
      Text('1').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('2').width('60%').height(20).backgroundColor('#D2B48C')
      Text('3').width('40%').height(20).backgroundColor('#D2B48C')
      Text('4').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('5').width('20%').height(20).backgroundColor('#D2B48C')
    }
    .width('90%')
    .height(100)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/89/v3/xw30nSaJRLaXozYkmmFsSw/zh-cn_image_0000002625187241.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=FBB96B8CCFEB09597EE0D1BAAE0FEDA888D3C3AA6939C7D0AB52E4D16F988BE8)
    
*   FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
    
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
      Text('1').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('2').width('60%').height(20).backgroundColor('#D2B48C')
      Text('3').width('40%').height(20).backgroundColor('#D2B48C')
      Text('4').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('5').width('20%').height(20).backgroundColor('#D2B48C')
    }
    .width('90%')
    .height(100)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/50/v3/YeF6pS7YS5GQWHB1NXV3Kg/zh-cn_image_0000002625107385.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=D2B966E12D1ACFD5B9AE99A9F888D8D6A03DC36358AAAC371CCACF502C1CA678)
    
*   FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
    
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
      Text('1').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('2').width('60%').height(20).backgroundColor('#D2B48C')
      Text('3').width('40%').height(20).backgroundColor('#D2B48C')
      Text('4').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('5').width('20%').height(20).backgroundColor('#D2B48C')
    }
    .width('90%')
    .height(100)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/23/v3/JRtnyfRwT1G-HF3G3FDv2g/zh-cn_image_0000002594667868.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=D001F89829722474374DBA100880C85C0B4862526DAE894D61121BDA393D91C9)
    
*   FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
    
    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
      Text('1').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('2').width('60%').height(20).backgroundColor('#D2B48C')
      Text('3').width('40%').height(20).backgroundColor('#D2B48C')
      Text('4').width('30%').height(20).backgroundColor('#F5DEB3')
      Text('5').width('20%').height(20).backgroundColor('#D2B48C')
    }
    .width('90%')
    .height(100)
    .backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6d/v3/etofoMjCQH2-XBcUxdIC5Q/zh-cn_image_0000002594827796.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=7233767C81B057591F0F60FC780924E0A9439F8C2BEBA897919E10FF3F1F1C05)
    

#### 自适应拉伸

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

*   [flexBasis](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-flex-layout#flexbasis)：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。
    
    Flex() {
      Text('flexBasis("auto")')
        .flexBasis('auto')// 未设置width以及flexBasis值为auto，内容自身宽度
        .height(100)
        .backgroundColor('#F5DEB3')
      Text('flexBasis("auto")'+' width("40%")')
        .width('40%')
        .flexBasis('auto')// 设置width以及flexBasis值auto，使用width的值
        .height(100)
        .backgroundColor('#D2B48C')
    
      Text('flexBasis(100)') // 未设置width以及flexBasis值为100，宽度为100vp
        .flexBasis(100)
        .height(100)
        .backgroundColor('#F5DEB3')
    
      Text('flexBasis(100)')
        .flexBasis(100)
        .width(200)// flexBasis值为100，覆盖width的设置值，宽度为100vp
        .height(100)
        .backgroundColor('#D2B48C')
    }.width('90%').height(120).padding(10).backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/56/v3/5ruppC2IRpCdW3ZxGp1weQ/zh-cn_image_0000002625187243.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=A42D89EA4149B1562C3177586BF99B919FF56CBCC953801F87857ABA5CDBFA70)
    
*   [flexGrow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-flex-layout#flexgrow)：设置父容器的剩余空间分配给此属性所在组件的比例，用于分配父组件的剩余空间。
    
    Flex() {
      Text('flexGrow(1)')
        .flexGrow(1)
        .width(100)
        .height(100)
        .backgroundColor('#F5DEB3')
      Text('flexGrow(4)')
        .flexGrow(4)
        .width(100)
        .height(100)
        .backgroundColor('#D2B48C')
    
      Text('no flexGrow')
        .width(100)
        .height(100)
        .backgroundColor('#F5DEB3')
    }.width(360).height(120).padding(10).backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/08/v3/zbCI9mgYTT6812gKqK1Ilg/zh-cn_image_0000002625107387.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=ECC04368EE9BB14688B16D6E07898C3C13D683457AFE8B1C00CEBA5BD5DC7B29)
    
    父容器宽度360vp，三个子元素原始宽度均为100vp，左右padding为20vp，总和320vp，剩余空间40vp根据flexGrow值的占比分配给子元素，未设置flexGrow的子元素不参与分配。
    
    第一个元素以及第二个元素以1:4分配剩下的40vp。第一个元素为100vp+40vp \* 1/5=108vp，第二个元素为100vp+40vp \* 4/5=132vp。
    
*   [flexShrink](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-flex-layout#flexshrink): 当父容器空间不足时，子元素的压缩比例。
    
    Flex({ direction: FlexDirection.Row }) {
      Text('flexShrink(3)')
        .flexShrink(3)
        .width(200)
        .height(100)
        .backgroundColor('#F5DEB3')
    
      Text('no flexShrink')
        .width(200)
        .height(100)
        .backgroundColor('#D2B48C')
    
      Text('flexShrink(2)')
        .flexShrink(2)
        .width(200)
        .height(100)
        .backgroundColor('#F5DEB3')
    }.width(400).height(120).padding(10).backgroundColor('#AFEEEE')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c5/v3/gWXvcmOBRBGDWpAc_XJpnA/zh-cn_image_0000002594667870.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=955BE428208B842D46C3918E48BEB6253E9833DDC0F2E6ABAF445EFE8ACCAC71)
    
    父容器宽度400vp，三个子元素原始宽度为200vp，左右padding为20vp，父容器给子元素的布局空间为380vp，超出父容器空间220vp。
    
    将第一个元素和第三个元素以3:2的压缩比例进行压缩，直至不再超出父容器提供的布局空间。第一个元素为200vp - (220vp / 5) \* 3=68vp，第三个元素为200vp - (220vp / 5) \* 2=112vp。
    

#### 场景示例

使用弹性布局，可以实现子元素沿水平方向排列，两端对齐，子元素间距平分，垂直方向上子元素居中的效果。

@Entry
@Component
struct FlexExample {
  build() {
    Column() {
      Column({ space: 5 }) {
        Flex({
          direction: FlexDirection.Row,
          wrap: FlexWrap.NoWrap,
          justifyContent: FlexAlign.SpaceBetween,
          alignItems: ItemAlign.Center
        }) {
          Text('1').width('30%').height(50).backgroundColor('#F5DEB3')
          Text('2').width('30%').height(50).backgroundColor('#D2B48C')
          Text('3').width('30%').height(50).backgroundColor('#F5DEB3')
        }
        .height(70)
        .width('90%')
        .backgroundColor('#AFEEEE')
      }.width('100%').margin({ top: 5 })
    }.width('100%')
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3c/v3/JzIYOnGTQiKOlz8Zdr01bw/zh-cn_image_0000002594827798.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=92973989CEF1D51499256CB8576402D47ABDDE54AF16A2A1B5E7057DFF06B4E2)