1# Flex 2 3以弹性方式布局子组件的容器组件。 4 5> **说明：** 6> 7> - 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> - Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用[Column](ts-container-column.md)、[Row](ts-container-row.md)代替。 9> - Flex组件主轴默认不设置时撑满父容器，[Column](ts-container-column.md)、[Row](ts-container-row.md)组件主轴不设置时默认是跟随子节点大小。 10 11 12## 子组件 13 14可以包含子组件。 15 16 17## 接口 18 19Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign }) 20 21标准Flex布局容器。具体指南请参考[弹性布局](../../ui/arkts-layout-development-flex-layout.md)。 22 23从API version 9开始，该接口支持在ArkTS卡片中使用。 24 25**参数:** 26 27| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 28| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- | 29| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 | 30| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。<br/>**说明：** <br/>在多行布局时，通过交叉轴方向，确认新行堆叠方向。 | 31| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 所有子组件在Flex容器主轴上的对齐格式。 | 32| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | 否 | ItemAlign.Start | 所有子组件在Flex容器交叉轴上的对齐格式。 | 33| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 | 34 35## 示例 36 37### 示例1 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct FlexExample1 { 44 build() { 45 Column() { 46 Column({ space: 5 }) { 47 Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%') 48 Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上行布局 49 Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) 50 Text('2').width('20%').height(50).backgroundColor(0xD2B48C) 51 Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) 52 Text('4').width('20%').height(50).backgroundColor(0xD2B48C) 53 } 54 .height(70) 55 .width('90%') 56 .padding(10) 57 .backgroundColor(0xAFEEEE) 58 59 Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') 60 Flex({ direction: FlexDirection.RowReverse }) { // 子组件在容器主轴上反向行布局 61 Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) 62 Text('2').width('20%').height(50).backgroundColor(0xD2B48C) 63 Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) 64 Text('4').width('20%').height(50).backgroundColor(0xD2B48C) 65 } 66 .height(70) 67 .width('90%') 68 .padding(10) 69 .backgroundColor(0xAFEEEE) 70 71 Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%') 72 Flex({ direction: FlexDirection.Column }) { // 子组件在容器主轴上列布局 73 Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) 74 Text('2').width('100%').height(40).backgroundColor(0xD2B48C) 75 Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) 76 Text('4').width('100%').height(40).backgroundColor(0xD2B48C) 77 } 78 .height(160) 79 .width('90%') 80 .padding(10) 81 .backgroundColor(0xAFEEEE) 82 83 Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') 84 Flex({ direction: FlexDirection.ColumnReverse }) { // 子组件在容器主轴上反向列布局 85 Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) 86 Text('2').width('100%').height(40).backgroundColor(0xD2B48C) 87 Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) 88 Text('4').width('100%').height(40).backgroundColor(0xD2B48C) 89 } 90 .height(160) 91 .width('90%') 92 .padding(10) 93 .backgroundColor(0xAFEEEE) 94 }.width('100%').margin({ top: 5 }) 95 }.width('100%') 96 } 97} 98``` 99 100 101 102### 示例2 103 104```ts 105// xxx.ets 106@Entry 107@Component 108struct FlexExample2 { 109 build() { 110 Column() { 111 Column({ space: 5 }) { 112 Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%') 113 Flex({ wrap: FlexWrap.Wrap }) { // 子组件多行布局 114 Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) 115 Text('2').width('50%').height(50).backgroundColor(0xD2B48C) 116 Text('3').width('50%').height(50).backgroundColor(0xD2B48C) 117 } 118 .width('90%') 119 .padding(10) 120 .backgroundColor(0xAFEEEE) 121 122 Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%') 123 Flex({ wrap: FlexWrap.NoWrap }) { // 子组件单行布局 124 Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) 125 Text('2').width('50%').height(50).backgroundColor(0xD2B48C) 126 Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) 127 } 128 .width('90%') 129 .padding(10) 130 .backgroundColor(0xAFEEEE) 131 132 Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') 133 Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // 子组件反向多行布局 134 Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) 135 Text('2').width('50%').height(50).backgroundColor(0xD2B48C) 136 Text('3').width('50%').height(50).backgroundColor(0xD2B48C) 137 } 138 .width('90%') 139 .height(120) 140 .padding(10) 141 .backgroundColor(0xAFEEEE) 142 }.width('100%').margin({ top: 5 }) 143 }.width('100%') 144 } 145} 146``` 147 148 149 150### 示例3 151 152```ts 153// xxx.ets 154@Component 155struct JustifyContentFlex { 156 justifyContent : number = 0; 157 158 build() { 159 Flex({ justifyContent: this.justifyContent }) { 160 Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) 161 Text('2').width('20%').height(50).backgroundColor(0xD2B48C) 162 Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) 163 } 164 .width('90%') 165 .padding(10) 166 .backgroundColor(0xAFEEEE) 167 } 168} 169 170@Entry 171@Component 172struct FlexExample3 { 173 build() { 174 Column() { 175 Column({ space: 5 }) { 176 Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') 177 JustifyContentFlex({ justifyContent: FlexAlign.Start }) // 子组件在容器主轴上首端对齐 178 179 Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') 180 JustifyContentFlex({ justifyContent: FlexAlign.Center }) // 子组件在容器主轴上居中对齐 181 182 Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') 183 JustifyContentFlex({ justifyContent: FlexAlign.End }) // 子组件在容器主轴上尾端对齐 184 185 Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') 186 JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) // 子组件在容器主轴上均分容器布局，第一个子组件与行首对齐，最后一个子组件与行尾对齐。 187 188 Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') 189 JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) // 子组件在容器主轴上均分容器布局，第一个子组件到行首的距离和最后一个子组件到行尾的距离是相邻子组件之间距离的一半。 190 191 Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') 192 JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) // 子组件在容器主轴上均分容器布局，子组件之间的距离与第一子组件到行首、最后一个子组件到行尾的距离相等 193 }.width('100%').margin({ top: 5 }) 194 }.width('100%') 195 } 196} 197``` 198 199 200 201### 示例4 202 203```ts 204// xxx.ets 205@Component 206struct AlignItemsFlex { 207 alignItems : number = 0 208 209 build() { 210 Flex({ alignItems: this.alignItems }) { 211 Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) 212 Text('2').width('33%').height(40).backgroundColor(0xD2B48C) 213 Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) 214 } 215 .size({width: '90%', height: 80}) 216 .padding(10) 217 .backgroundColor(0xAFEEEE) 218 } 219} 220 221@Entry 222@Component 223struct FlexExample4 { 224 build() { 225 Column() { 226 Column({ space: 5 }) { 227 Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%') 228 AlignItemsFlex({ alignItems: ItemAlign.Auto }) // 子组件在容器交叉轴上首部对齐 229 230 Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') 231 AlignItemsFlex({ alignItems: ItemAlign.Start }) // 子组件在容器交叉轴上首部对齐 232 233 Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') 234 AlignItemsFlex({ alignItems: ItemAlign.Center }) // 子组件在容器交叉轴上居中对齐 235 236 Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%') 237 AlignItemsFlex({ alignItems: ItemAlign.End }) // 子组件在容器交叉轴上尾部对齐 238 239 Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%') 240 AlignItemsFlex({ alignItems: ItemAlign.Stretch }) // 子组件在容器交叉轴上拉伸填充 241 242 Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%') 243 AlignItemsFlex({ alignItems: ItemAlign.Baseline }) // 子组件在容器交叉轴上与文本基线对齐 244 }.width('100%').margin({ top: 5 }) 245 }.width('100%') 246 } 247} 248``` 249 250 251 252### 示例5 253 254```ts 255// xxx.ets 256@Component 257struct AlignContentFlex { 258 alignContent: number = 0 259 260 build() { 261 Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) { 262 Text('1').width('50%').height(20).backgroundColor(0xF5DEB3) 263 Text('2').width('50%').height(20).backgroundColor(0xD2B48C) 264 Text('3').width('50%').height(20).backgroundColor(0xD2B48C) 265 } 266 .size({ width: '90%', height: 90 }) 267 .padding(10) 268 .backgroundColor(0xAFEEEE) 269 } 270} 271 272@Entry 273@Component 274struct FlexExample5 { 275 build() { 276 Column() { 277 Column({ space: 5 }) { 278 Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') 279 AlignContentFlex({ alignContent: FlexAlign.Start }) // 多行布局下子组件首部对齐 280 281 Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') 282 AlignContentFlex({ alignContent: FlexAlign.Center }) // 多行布局下子组件居中对齐 283 284 Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') 285 AlignContentFlex({ alignContent: FlexAlign.End }) // 多行布局下子组件尾部对齐 286 287 Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') 288 AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) // 多行布局下第一行子组件与列首对齐，最后一行子组件与列尾对齐 289 290 Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') 291 AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) // 多行布局下第一行子组件到列首的距离和最后一行子组件到列尾的距离是相邻行之间距离的一半 292 293 Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') 294 Flex({ 295 wrap: FlexWrap.Wrap, 296 alignContent: FlexAlign.SpaceEvenly 297 }) { // 多行布局下相邻行之间的距离与第一行子组件到列首的距离、最后一行子组件到列尾的距离完全一样 298 Text('1').width('50%').height(20).backgroundColor(0xF5DEB3) 299 Text('2').width('50%').height(20).backgroundColor(0xD2B48C) 300 Text('3').width('50%').height(20).backgroundColor(0xF5DEB3) 301 Text('4').width('50%').height(20).backgroundColor(0xD2B48C) 302 Text('5').width('50%').height(20).backgroundColor(0xF5DEB3) 303 } 304 .size({ width: '90%', height: 100 }) 305 .padding({ left: 10, right: 10 }) 306 .backgroundColor(0xAFEEEE) 307 }.width('100%').margin({ top: 5 }) 308 }.width('100%') 309 } 310} 311``` 312 313 314
