1# Row 2 3The **<Row\>** component lays out child components horizontally. 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 9 10## Child Components 11 12Supported 13 14 15## APIs 16 17Row(value?:{space?: number | string }) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| space | number \| string | No| Horizontal spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number or when **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround** or **FlexAlign.SpaceEvenly**.<br>Default value: **0**, in vp<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.| 26 27 28## Attributes 29 30In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 31 32| Name| Type| Description| 33| -------- | -------- | -------- | 34| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**<br>Since API version 9, this API is supported in ArkTS widgets.| 35| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **FlexAlign.Start**<br>Since API version 9, this API is supported in ArkTS widgets.| 36 37> **NOTE** 38> 39> During row layout, child components do not shrink if [flexShrink](ts-universal-attributes-flex-layout.md#flexshrink) is not set for them. In this case, the total size of the child components on the main axis can exceed the size of the container on the main axis. 40 41## Events 42 43The [universal events](ts-universal-events-click.md) are supported. 44 45## Example 46 47```ts 48// xxx.ets 49@Entry 50@Component 51struct RowExample { 52 build() { 53 Column({ space: 5 }) { 54 // Set the horizontal spacing between two adjacent child components to 5. 55 Text('space').width('90%') 56 Row({ space: 5 }) { 57 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 58 Row().width('30%').height(50).backgroundColor(0x00FFFF) 59 }.width('90%').height(107).border({ width: 1 }) 60 61 // Set the alignment mode of the child components in the vertical direction. 62 Text('alignItems(Bottom)').width('90%') 63 Row() { 64 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 65 Row().width('30%').height(50).backgroundColor(0x00FFFF) 66 }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) 67 68 Text('alignItems(Center)').width('90%') 69 Row() { 70 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 71 Row().width('30%').height(50).backgroundColor(0x00FFFF) 72 }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) 73 74 // Set the alignment mode of the child components in the horizontal direction. 75 Text('justifyContent(End)').width('90%') 76 Row() { 77 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 78 Row().width('30%').height(50).backgroundColor(0x00FFFF) 79 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) 80 81 Text('justifyContent(Center)').width('90%') 82 Row() { 83 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 84 Row().width('30%').height(50).backgroundColor(0x00FFFF) 85 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) 86 }.width('100%') 87 } 88} 89``` 90 91 92
