1# Flex 2 3The **Flex** component allows for flexible layout of child components. 4 5> **NOTE** 6> 7> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> - The **Flex** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use [Column](ts-container-column.md) or [Row](ts-container-row.md) instead under scenarios where consistently high performance is required. 9> - If the main axis of the **Flex** component is not set, it follows the size of the parent container. On the contrary, if the main axis of the [Column](ts-container-column.md) or [Row](ts-container-row.md) component is not set, it follows the size of their child component. 10 11 12## Child Components 13 14Supported 15 16 17## APIs 18 19Flex(value?: FlexOptions) 20 21Creates a standard **Flex** component. For details, see [Flex Layout](../../../ui/arkts-layout-development-flex-layout.md). 22 23**Widget capability**: This API can be used in ArkTS widgets since API version 9. 24 25**Atomic service API**: This API can be used in atomic services since API version 11. 26 27**Parameters** 28 29| Name | Type | Mandatory | Description | 30| -------------- | ---------------------------------------- | ---- | ---------------------------------------- | 31| value | [FlexOptions](#flexoptions) | No | Parameters of the child components in the **Flex** component. | 32 33## FlexOptions 34| Name | Type | Mandatory | Default Value | Description | 35| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- | 36| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **Flex** component, that is, the direction of the main axis. | 37| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **Flex** component has a single line or multiple lines.<br>**NOTE**<br>When wrapped onto multiple lines, the child elements on the new line are stacked in the direction based on the cross axis direction.| 38| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **Flex** component along the main axis. | 39| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **Flex** component along the cross axis. | 40| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-row **Flex** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.| 41| space<sup>12+</sup> | [FlexSpaceOptions](ts-appendix-enums.md#flexspaceoptions12) | No | {main:LengthMetrics.px(0), cross:LengthMetrics.px(0)} | Space of all child components on the main axis or cross axis of the **Flex** component.<br>This parameter does not take effect if the value specified is a negative number or percentage, or if **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround**, or **FlexAlign.SpaceEvenly**.<br>**NOTE**<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 42 43## Example 44 45### Example 1 46 47```ts 48// xxx.ets 49@Entry 50@Component 51struct FlexExample1 { 52 build() { 53 Column() { 54 Column({ space: 5 }) { 55 Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%') 56 Flex({ direction: FlexDirection.Row }) { // The child components are arranged in the same direction as the main axis runs along the rows. 57 Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) 58 Text('2').width('20%').height(50).backgroundColor(0xD2B48C) 59 Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) 60 Text('4').width('20%').height(50).backgroundColor(0xD2B48C) 61 } 62 .height(70) 63 .width('90%') 64 .padding(10) 65 .backgroundColor(0xAFEEEE) 66 67 Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') 68 Flex({ direction: FlexDirection.RowReverse }) { // The child components are arranged opposite to the Row direction. 69 Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) 70 Text('2').width('20%').height(50).backgroundColor(0xD2B48C) 71 Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) 72 Text('4').width('20%').height(50).backgroundColor(0xD2B48C) 73 } 74 .height(70) 75 .width('90%') 76 .padding(10) 77 .backgroundColor(0xAFEEEE) 78 79 Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%') 80 Flex({ direction: FlexDirection.Column }) { // The child components are arranged in the same direction as the main axis runs down the columns. 81 Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) 82 Text('2').width('100%').height(40).backgroundColor(0xD2B48C) 83 Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) 84 Text('4').width('100%').height(40).backgroundColor(0xD2B48C) 85 } 86 .height(160) 87 .width('90%') 88 .padding(10) 89 .backgroundColor(0xAFEEEE) 90 91 Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') 92 Flex({ direction: FlexDirection.ColumnReverse }) { // The child components are arranged opposite to the Column direction. 93 Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) 94 Text('2').width('100%').height(40).backgroundColor(0xD2B48C) 95 Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) 96 Text('4').width('100%').height(40).backgroundColor(0xD2B48C) 97 } 98 .height(160) 99 .width('90%') 100 .padding(10) 101 .backgroundColor(0xAFEEEE) 102 }.width('100%').margin({ top: 5 }) 103 }.width('100%') 104 } 105} 106``` 107 108 109 110### Example 2 111 112```ts 113// xxx.ets 114@Entry 115@Component 116struct FlexExample2 { 117 build() { 118 Column() { 119 Column({ space: 5 }) { 120 Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%') 121 Flex({ wrap: FlexWrap.Wrap }) { // The child components are arranged in multiple lines. 122 Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) 123 Text('2').width('50%').height(50).backgroundColor(0xD2B48C) 124 Text('3').width('50%').height(50).backgroundColor(0xD2B48C) 125 } 126 .width('90%') 127 .padding(10) 128 .backgroundColor(0xAFEEEE) 129 130 Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%') 131 Flex({ wrap: FlexWrap.NoWrap }) { // The child components are arranged in a single line. 132 Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) 133 Text('2').width('50%').height(50).backgroundColor(0xD2B48C) 134 Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) 135 } 136 .width('90%') 137 .padding(10) 138 .backgroundColor(0xAFEEEE) 139 140 Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') 141 Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // The child components are reversely arranged in multiple lines, and they may overflow. 142 Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) 143 Text('2').width('50%').height(50).backgroundColor(0xD2B48C) 144 Text('3').width('50%').height(50).backgroundColor(0xD2B48C) 145 } 146 .width('90%') 147 .height(120) 148 .padding(10) 149 .backgroundColor(0xAFEEEE) 150 }.width('100%').margin({ top: 5 }) 151 }.width('100%') 152 } 153} 154``` 155 156 157 158### Example 3 159 160```ts 161// xxx.ets 162@Component 163struct JustifyContentFlex { 164 justifyContent : number = 0; 165 166 build() { 167 Flex({ justifyContent: this.justifyContent }) { 168 Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) 169 Text('2').width('20%').height(50).backgroundColor(0xD2B48C) 170 Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) 171 } 172 .width('90%') 173 .padding(10) 174 .backgroundColor(0xAFEEEE) 175 } 176} 177 178@Entry 179@Component 180struct FlexExample3 { 181 build() { 182 Column() { 183 Column({ space: 5 }) { 184 Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') 185 JustifyContentFlex({ justifyContent: FlexAlign.Start }) // The child components are aligned with the start edge of the main axis. 186 187 Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') 188 JustifyContentFlex({ justifyContent: FlexAlign.Center }) // The child components are aligned in the center of the main axis. 189 190 Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') 191 JustifyContentFlex({ justifyContent: FlexAlign.End }) // The child components are aligned with the end edge of the main axis. 192 193 Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') 194 JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) // The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end. 195 196 Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') 197 JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) // The child components are evenly distributed along the main axis. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. 198 199 Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') 200 JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) // The child components are evenly distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between any two adjacent components are the same. 201 }.width('100%').margin({ top: 5 }) 202 }.width('100%') 203 } 204} 205``` 206 207 208 209### Example 4 210 211```ts 212// xxx.ets 213@Component 214struct AlignItemsFlex { 215 alignItems : number = 0; 216 217 build() { 218 Flex({ alignItems: this.alignItems }) { 219 Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) 220 Text('2').width('33%').height(40).backgroundColor(0xD2B48C) 221 Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) 222 } 223 .size({width: '90%', height: 80}) 224 .padding(10) 225 .backgroundColor(0xAFEEEE) 226 } 227} 228 229@Entry 230@Component 231struct FlexExample4 { 232 build() { 233 Column() { 234 Column({ space: 5 }) { 235 Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%') 236 AlignItemsFlex({ alignItems: ItemAlign.Auto }) // The items in the container are aligned with the cross-start edge. 237 238 Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') 239 AlignItemsFlex({ alignItems: ItemAlign.Start }) // The items in the container are aligned with the cross-start edge. 240 241 Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') 242 AlignItemsFlex({alignItems: ItemAlign.Center}) // The items in the container are centered along the cross axis. 243 244 Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%') 245 AlignItemsFlex({ alignItems: ItemAlign.End }) // The items in the container are aligned with the cross-end edge. 246 247 Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%') 248 AlignItemsFlex({ alignItems: ItemAlign.Stretch }) // The items in the container are stretched and padded along the cross axis. 249 250 Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%') 251 AlignItemsFlex({ alignItems: ItemAlign.Baseline }) // The items in the container are aligned in such a manner that their text baselines are aligned along the cross axis. 252 }.width('100%').margin({ top: 5 }) 253 }.width('100%') 254 } 255} 256``` 257 258 259 260### Example 5 261 262```ts 263// xxx.ets 264@Component 265struct AlignContentFlex { 266 alignContent: number = 0; 267 268 build() { 269 Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) { 270 Text('1').width('50%').height(20).backgroundColor(0xF5DEB3) 271 Text('2').width('50%').height(20).backgroundColor(0xD2B48C) 272 Text('3').width('50%').height(20).backgroundColor(0xD2B48C) 273 } 274 .size({ width: '90%', height: 90 }) 275 .padding(10) 276 .backgroundColor(0xAFEEEE) 277 } 278} 279 280@Entry 281@Component 282struct FlexExample5 { 283 build() { 284 Column() { 285 Column({ space: 5 }) { 286 Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') 287 AlignContentFlex({ alignContent: FlexAlign.Start }) // The child components are aligned with the start edge in the multi-row layout. 288 289 Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') 290 AlignContentFlex({ alignContent: FlexAlign.Center }) // The child components are aligned in the center in the multi-row layout. 291 292 Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') 293 AlignContentFlex({ alignContent: FlexAlign.End }) // The child components are aligned with the end edge in the multi-row layout. 294 295 Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') 296 AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) // In the multi-row layout, the child component in the first row is aligned with the start edge of the column, and the child component in the last row is aligned with the end edge of the column. 297 298 Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') 299 AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) // In the multi-row layout, the space between the child component in the first row and the start edge of the column, and that between the child component in the last row and the end edge of the column are both half the size of the space between two adjacent rows. 300 301 Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') 302 Flex({ 303 wrap: FlexWrap.Wrap, 304 alignContent: FlexAlign.SpaceEvenly 305 }) {// In the multi-row layout, the space between the child component in the first row and the start edge of the column, the space between the child component in the last row and the end edge of the column, and the space between any two adjacent rows are the same. 306 Text('1').width('50%').height(20).backgroundColor(0xF5DEB3) 307 Text('2').width('50%').height(20).backgroundColor(0xD2B48C) 308 Text('3').width('50%').height(20).backgroundColor(0xF5DEB3) 309 Text('4').width('50%').height(20).backgroundColor(0xD2B48C) 310 Text('5').width('50%').height(20).backgroundColor(0xF5DEB3) 311 } 312 .size({ width: '90%', height: 100 }) 313 .padding({ left: 10, right: 10 }) 314 .backgroundColor(0xAFEEEE) 315 }.width('100%').margin({ top: 5 }) 316 }.width('100%') 317 } 318} 319``` 320 321 322 323### Example 6 324 325```ts 326import {LengthMetrics} from '@kit.ArkUI'; 327 328@Entry 329@Component 330struct FlexExample2 { 331 build() { 332 Column() { 333 Column({ space: 5 }) { 334 Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%') 335 Flex({ wrap: FlexWrap.Wrap, space: {main: LengthMetrics.px(50), cross: LengthMetrics.px(50)} }) { // The child components are arranged in multiple lines. 336 Text('1').width('40%').height(50).backgroundColor(0xF5DEB3) 337 Text('2').width('40%').height(50).backgroundColor(0xD2B48C) 338 Text('3').width('40%').height(50).backgroundColor(0xD2B48C) 339 } 340 .width('90%') 341 .padding(10) 342 .backgroundColor(0xAFEEEE) 343 344 Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%') 345 Flex({ wrap: FlexWrap.Wrap, space: {main: LengthMetrics.px(50), cross: LengthMetrics.px(50)} }) { // The child components are arranged in a single line. 346 Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) 347 Text('2').width('50%').height(50).backgroundColor(0xD2B48C) 348 Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) 349 } 350 .width('90%') 351 .padding(10) 352 .backgroundColor(0xAFEEEE) 353 354 Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') 355 Flex({ wrap: FlexWrap.WrapReverse, direction:FlexDirection.Row, space: {main: LengthMetrics.px(50), cross: LengthMetrics.px(50)} }) { // The child components are reversely arranged in multiple lines. 356 Text('1').width('40%').height(50).backgroundColor(0xF5DEB3) 357 Text('2').width('40%').height(50).backgroundColor(0xD2B48C) 358 Text('3').width('40%').height(50).backgroundColor(0xD2B48C) 359 } 360 .width('90%') 361 .height(120) 362 .padding(10) 363 .backgroundColor(0xAFEEEE) 364 }.width('100%').margin({ top: 5 }) 365 }.width('100%') 366 } 367} 368``` 369 370 371
