弹性布局 (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/36/v3/X9t0F3VjSQqrKejqToaIrg/zh-cn_image_0000002664327487.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=6F087F6CC3613EFAFB176DBE03F6A4BA10B3CB3EA7EE9ABFB99DE7143193523E)

#### 基本概念

*   主轴：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/e3/v3/pnZa-AKVQz-Ch4Ynx8Yq0w/zh-cn_image_0000002633848376.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=415992E97EF2B99B982EA9EEFBD2D88F931720CF36DF8B64A3B66AE3ACDC7172)

*   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/4e/v3/4afIrQFbTX-AIqaYCG4Nzg/zh-cn_image_0000002634008280.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=88440D19F1911A9D4562BA07651298A744A6D26F3D5600D9410B2B2C94242236)
    
*   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/3f/v3/lY7QvVo2T6CddfrzZ1vu_Q/zh-cn_image_0000002664207427.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=37F589A9EF201A7621473AF34CD51DE6A1516019CF79DD7622D59501EDB1CFE3)
    
*   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/db/v3/1uTwzPowTlerRVBQPs8YwQ/zh-cn_image_0000002664327489.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=D1D0B7C7CDE70EBEF2686243047851DE065A05E4B1DFD36ED2795C74AADE41CF)
    
*   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/95/v3/B3L9nztWSdmGSF2tK4Aelg/zh-cn_image_0000002633848378.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=7402E1758AFFE1DBADA1749A3874A7B4C9B38702B000D9D2A93FEDCB065063B2)
    

#### 布局换行

弹性布局分为单行布局和多行布局。默认情况下，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/e5/v3/e_q1NUIwQlqsDHjLNy-U7w/zh-cn_image_0000002634008282.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=3E84CFAD46996B449E3BDC64F6B2239DFBDBA3608A964C313EB1251A777E50E7)
    
*   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/25/v3/x3FTPPTtSYmZnvSzpi1tyw/zh-cn_image_0000002664207429.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=31867559BF19113F64672144780B049F4BE0208E1D94BA96B6D6D8E75AFC7B17)
    
*   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/be/v3/N-REFrVIQby0Za6mPYqyAw/zh-cn_image_0000002664327491.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=F68559CE8BC86C0B9AEAC2814F538C3F72E97EAF675C061426FFA4D1F186A553)
    

#### 主轴对齐方式

通过[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/4b/v3/fMJuy0ndQ4WtgYyH-JeXfA/zh-cn_image_0000002633848380.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=AB90EE14675C5F19490774475037661FC91EE135D74939DDF5B5A250665C2CE7)

*   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/c/v3/ZZ7844n2QSuUOZexhpAKLA/zh-cn_image_0000002634008284.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=172913C64FD46D3E5FBD13936BBE5C1EBDDC5CF4A0FFA9465B6668C0E7FBB559)
    
*   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/5f/v3/L4VSjQj-R92AKSmLWD4Olw/zh-cn_image_0000002664207431.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=0B4F229972F1B4BCFB1131387CE947794C3AEE454AE4FFA7455EA102E951041C)
    
*   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/5b/v3/8uY10wUPQLij6NVd2RbYvA/zh-cn_image_0000002664327493.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=8F29F5760CCB24FB185324817962ACC15BC53F487E2D641C634E954672F895A0)
    
*   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/23/v3/8mR-qj1ETjaC_4rv2VP5EQ/zh-cn_image_0000002633848382.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=E216E982DF90ED776200F317BD8B25A11E926D9EF076BAF0A93B7E03145629DB)
    
*   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/44/v3/CTRJ0wQITUeS5xSj24x3KA/zh-cn_image_0000002634008286.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=1FC11B679D7AC06C0B12F08AE9F332F39387C5F912F29AD5C7B7AECA7EF81AC6)
    
*   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/4d/v3/h2Q6UCgsQr-iw7L0GFJxAw/zh-cn_image_0000002664207433.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=53B739A1B784AE082EA326603124EC369B528AF179425AE54CA2558F9D506DD2)
    

#### 交叉轴对齐方式

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

#### \[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/8/v3/Ab4G10eNQHuYG6FEjyFgDw/zh-cn_image_0000002664327495.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=3E4D0CB9CDEE1D2CEB6552928005EC76EFEB60BE02C507CDEA2FFCB22EC09E80)
    
*   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/87/v3/Fw8f8H0OQZqMr7JVdDSJUA/zh-cn_image_0000002633848384.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=360D2C3819BF78A8B13175CD045F55D33BB4C28362319560746F506C04779F4C)
    
*   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/57/v3/pqo6an32QD64qulExICuUg/zh-cn_image_0000002634008288.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=A890A19485F2FB0FFCBC654032CB276EAD0F8C0A395615ECFE2DDE94B2F2F7D4)
    
*   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/f7/v3/eAPptZCYQAKgNuvS3GkzKw/zh-cn_image_0000002664207435.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=DC9E75FB2FB3927ADB3E95CBA1CDD7A8960ABBFEB2FAA3FE890F509DE02B89D2)
    
*   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/13/v3/vKPIgw_TS8S2o0cDy8dacA/zh-cn_image_0000002664327497.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=73E105BE72F7D274F47923B95BB78022F359A56CF4D26FA2EBBBB5B9046F4A08)
    
*   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/91/v3/IrWkwEVyQImbbfpQiW8J0A/zh-cn_image_0000002633848386.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=2A8F01E1359C7CA8CD4D55FC69B791793941D87E005C6FFAF99381C78606C408)
    

#### \[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/f2/v3/DSQM5SF_SoaWe8-LngW6-A/zh-cn_image_0000002634008290.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=8BD4A0A56D45C85EEBAAD61C797194A022F62B93E8D65F06062F07B72FDAAB4B)

上例中，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/3b/v3/M2z7dpI6T9ubu0rPwloltw/zh-cn_image_0000002664207437.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=4F000F771DBE8FB0AD8E97DAA84F7E6C3D0DDD8AD10A34806754A97821BFB883)
    
*   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/63/v3/ASdQg89IT4KnUZn3gH8Hrw/zh-cn_image_0000002664327499.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=16A7A8DFE14E065395268654F9665C9A99C3C8A20E0183348FE85EAB116FE8F7)
    
*   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/63/v3/L9tLewGbS_GzZ2KeJjD47g/zh-cn_image_0000002633848388.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=96962F91D57B42C21A3962D773D3B7915997F3BB41A280A91F496D45A13F0972)
    
*   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/a3/v3/KFYPugN_T1mNEHClk9dB9Q/zh-cn_image_0000002634008292.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=456D08B25FC562B213D24200BF4A51BE10980D53B62F49CD118D53932BB3D28E)
    
*   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/64/v3/mdf2Lp--TFqbVqIX-w6snw/zh-cn_image_0000002664207439.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=12EE768F63C89B672E456FAC4413B6CBF6A79C71151338EA599B2D611A57446D)
    
*   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/43/v3/3Uwlopz-TUuWJTKmb-zPIQ/zh-cn_image_0000002664327501.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=C7D7936A7A39DB434C0BB3E8F74225C42CE77B22CE5881DF672C49E51AAE5F61)
    

#### 自适应拉伸

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

*   [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/8e/v3/TxaDMuTfQSW2DtxLsKmVVA/zh-cn_image_0000002633848390.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=D305E9A69ABEF881876F780AFE76602C7B40F6A8007658D81167875F91131055)
    
*   [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/a0/v3/_xt3n5wyTnadwNP1fBkusw/zh-cn_image_0000002634008294.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=0F9AC86D335A2ED4FF944DD72469A263DF9CEA082A5A3E5B57D1D19BB9068ED6)
    
    父容器宽度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/93/v3/dRaHbjAXSmOD7XykTi_OYQ/zh-cn_image_0000002664207441.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=F1702CE4DD86D9ED4455E8FE93E11C172D0F84A6F75A873F6DCBADB3BF4EE0EB)
    
    父容器宽度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/e4/v3/2FbSrDMYSlORl7YwmR3KBA/zh-cn_image_0000002664327503.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=9CA809B46C785EAC74876330D7E75666785D91492C0931BE55E9AB2C74F60018)