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
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**Parameters**
24
25| Name| Type| Mandatory| Description|
26| -------- | -------- | -------- | -------- |
27| 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.|
28
29
30## Attributes
31
32In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
33
34### alignItems
35
36alignItems(value: VerticalAlign)
37
38Sets the alignment mode of child components in the vertical direction.
39
40**Widget capability**: This API can be used in ArkTS widgets since API version 9.
41
42**Atomic service API**: This API can be used in atomic services since API version 11.
43
44**System capability**: SystemCapability.ArkUI.ArkUI.Full
45
46**Parameters**
47
48| Name| Type                                               | Mandatory| Description                                                        |
49| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
50| value  | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Yes  | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**|
51
52### justifyContent<sup>8+</sup>
53
54justifyContent(value: FlexAlign)
55
56Sets the alignment mode of the child components in the horizontal direction.
57
58**Widget capability**: This API can be used in ArkTS widgets since API version 9.
59
60**Atomic service API**: This API can be used in atomic services since API version 11.
61
62**System capability**: SystemCapability.ArkUI.ArkUI.Full
63
64**Parameters**
65
66| Name| Type                                       | Mandatory| Description                                                      |
67| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
68| value  | [FlexAlign](ts-appendix-enums.md#flexalign) | Yes  | Alignment mode of child components in the horizontal direction.<br>Default value: **FlexAlign.Start**|
69
70>  **NOTE**   
71>
72>  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.
73
74## Events
75
76The [universal events](ts-universal-events-click.md) are supported.
77
78## Example
79
80```ts
81// xxx.ets
82@Entry
83@Component
84struct RowExample {
85  build() {
86    Column({ space: 5 }) {
87      // Set the horizontal spacing between two adjacent child components to 5.
88      Text('space').width('90%')
89      Row({ space: 5 }) {
90        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
91        Row().width('30%').height(50).backgroundColor(0x00FFFF)
92      }.width('90%').height(107).border({ width: 1 })
93
94      // Set the alignment mode of the child components in the vertical direction.
95      Text('alignItems(Bottom)').width('90%')
96      Row() {
97        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
98        Row().width('30%').height(50).backgroundColor(0x00FFFF)
99      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
100
101      Text('alignItems(Center)').width('90%')
102      Row() {
103        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
104        Row().width('30%').height(50).backgroundColor(0x00FFFF)
105      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
106
107      // Set the alignment mode of the child components in the horizontal direction.
108      Text('justifyContent(End)').width('90%')
109      Row() {
110        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
111        Row().width('30%').height(50).backgroundColor(0x00FFFF)
112      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
113
114      Text('justifyContent(Center)').width('90%')
115      Row() {
116        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
117        Row().width('30%').height(50).backgroundColor(0x00FFFF)
118      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
119    }.width('100%')
120  }
121}
122```
123
124![row](figures/row.png)
125