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