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**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name| Type| Mandatory| Description|
28| -------- | -------- | -------- | -------- |
29| 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.|
30
31
32## Attributes
33
34In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
35
36### alignItems
37
38alignItems(value: VerticalAlign)
39
40Sets the alignment mode of child components in the vertical direction.
41
42**Widget capability**: This API can be used in ArkTS widgets since API version 9.
43
44**Atomic service API**: This API can be used in atomic services since API version 11.
45
46**System capability**: SystemCapability.ArkUI.ArkUI.Full
47
48**Parameters**
49
50| Name| Type                                               | Mandatory| Description                                                        |
51| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
52| value  | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Yes  | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**|
53
54### justifyContent<sup>8+</sup>
55
56justifyContent(value: FlexAlign)
57
58Sets the alignment mode of the child components in the horizontal direction.
59
60**Widget capability**: This API can be used in ArkTS widgets since API version 9.
61
62**Atomic service API**: This API can be used in atomic services since API version 11.
63
64**System capability**: SystemCapability.ArkUI.ArkUI.Full
65
66**Parameters**
67
68| Name| Type                                       | Mandatory| Description                                                      |
69| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
70| value  | [FlexAlign](ts-appendix-enums.md#flexalign) | Yes  | Alignment mode of child components in the horizontal direction.<br>Default value: **FlexAlign.Start**|
71
72>  **NOTE**
73>
74>  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.
75
76### reverse<sup>12+</sup>
77
78reverse(isReversed: Optional\<boolean\>)
79
80Sets whether to reverse the arrangement of child components on the main axis (horizontal direction).
81
82**Widget capability**: This API can be used in ArkTS widgets since API version 12.
83
84**Atomic service API**: This API can be used in atomic services since API version 12.
85
86**System capability**: SystemCapability.ArkUI.ArkUI.Full
87
88**Parameters**
89
90| Name| Type                                       | Mandatory| Description                                                      |
91| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
92| isReversed  | Optional\<boolean\> | Yes  | Whether whether to reverse the arrangement of child components on the main axis (horizontal direction).<br>Default value: **true**|
93
94>  **NOTE**
95>
96>  If the **reverse** attribute is not set, the arrangement on the main axis remains in the normal order. If the attribute is set to **undefined**, it defaults to **true**, which reverses the arrangement on the main axis.<br>Keep in mind that the main axis arrangement direction is also affected by the **direction** attribute. If **reverse** is set to **true**, it effectively reverses the arrangement that results from the **direction** attribute settings.
97
98## Events
99
100The [universal events](ts-universal-events-click.md) are supported.
101
102## Example
103
104```ts
105// xxx.ets
106@Entry
107@Component
108struct RowExample {
109  build() {
110    Column({ space: 5 }) {
111      // Set the horizontal spacing between two adjacent child components to 5.
112      Text('space').width('90%')
113      Row({ space: 5 }) {
114        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
115        Row().width('30%').height(50).backgroundColor(0x00FFFF)
116      }.width('90%').height(107).border({ width: 1 })
117
118      // Set the alignment mode of the child components in the vertical direction.
119      Text('alignItems(Bottom)').width('90%')
120      Row() {
121        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
122        Row().width('30%').height(50).backgroundColor(0x00FFFF)
123      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
124
125      Text('alignItems(Center)').width('90%')
126      Row() {
127        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
128        Row().width('30%').height(50).backgroundColor(0x00FFFF)
129      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
130
131      // Set the alignment mode of the child components in the horizontal direction.
132      Text('justifyContent(End)').width('90%')
133      Row() {
134        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
135        Row().width('30%').height(50).backgroundColor(0x00FFFF)
136      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
137
138      Text('justifyContent(Center)').width('90%')
139      Row() {
140        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
141        Row().width('30%').height(50).backgroundColor(0x00FFFF)
142      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
143    }.width('100%')
144  }
145}
146```
147
148![row](figures/row.png)
149