1# Column
2
3沿垂直方向布局的容器。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12可以包含子组件。
13
14
15## 接口
16
17Column(value?: {space?: string | number})
18
19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
20
21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
22
23**系统能力：** SystemCapability.ArkUI.ArkUI.Full
24
25**参数：**
26
27| 参数名 | 类型 | 必填 | 说明 |
28| -------- | -------- | -------- | -------- |
29| value | {space?: string&nbsp;\|&nbsp;number} | 否 | 纵向布局元素垂直方向间距。<br/>从API version 9开始，space为负数或者[justifyContent](ts-container-column.md#justifycontent8)设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0<br/>单位：vp<br/>**说明：**<br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 |
30
31## 属性
32
33除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
34
35### alignItems
36
37alignItems(value: HorizontalAlign)
38
39设置子组件在水平方向上的对齐格式。
40
41**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
42
43**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
44
45**系统能力：** SystemCapability.ArkUI.ArkUI.Full
46
47**参数：**
48
49| 参数名 | 类型                                                    | 必填 | 说明                                                         |
50| ------ | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
51| value  | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 是   | 子组件在水平方向上的对齐格式。<br/>默认值：HorizontalAlign.Center |
52
53### justifyContent<sup>8+</sup>
54
55justifyContent(value: FlexAlign)
56
57设置子组件在垂直方向上的对齐格式。
58
59**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
60
61**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
62
63**系统能力：** SystemCapability.ArkUI.ArkUI.Full
64
65**参数：**
66
67| 参数名 | 类型                                        | 必填 | 说明                                                       |
68| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
69| value  | [FlexAlign](ts-appendix-enums.md#flexalign) | 是   | 子组件在垂直方向上的对齐格式。<br/>默认值：FlexAlign.Start |
70
71>  **说明：**
72>
73>  Column布局时若子组件不设置[flexShrink](ts-universal-attributes-flex-layout.md#flexshrink)则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴。
74
75### reverse<sup>12+</sup>
76
77reverse(isReversed: Optional\<boolean\>)
78
79设置子组件在主轴（即竖直方向）上的排列是否反转。
80
81**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
82
83**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
84
85**系统能力：** SystemCapability.ArkUI.ArkUI.Full
86
87**参数：**
88
89| 参数名 | 类型                                        | 必填 | 说明                                                       |
90| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
91| isReversed  | Optional\<boolean\> | 是   | 子组件在主轴（即竖直方向）上的排列是否反转。<br/>默认值：true |
92
93>  **说明：**
94>
95>  若未设置reverse属性，主轴方向不反转；若设置了reverse属性，且参数值为undefined，则视为默认值true，主轴方向反转。<br/>通用属性direction只能改变Column交叉轴方向，不改变Column主轴方向，因此与reverse属性互不影响。
96
97## 事件
98
99支持[通用事件](ts-universal-events-click.md)。
100
101## 示例
102
103设置垂直方向的布局属性，如间距、对齐方式等。
104
105```ts
106// xxx.ets
107@Entry
108@Component
109struct ColumnExample {
110  build() {
111    Column({ space: 5 }) {
112      // 设置子元素垂直方向间距为5
113      Text('space').width('90%')
114      Column({ space: 5 }) {
115        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
116        Column().width('100%').height(30).backgroundColor(0x00FFFF)
117      }.width('90%').height(100).border({ width: 1 })
118
119      // 设置子元素水平方向对齐方式
120      Text('alignItems(Start)').width('90%')
121      Column() {
122        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
123        Column().width('50%').height(30).backgroundColor(0x00FFFF)
124      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
125
126      Text('alignItems(End)').width('90%')
127      Column() {
128        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
129        Column().width('50%').height(30).backgroundColor(0x00FFFF)
130      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
131
132      Text('alignItems(Center)').width('90%')
133      Column() {
134        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
135        Column().width('50%').height(30).backgroundColor(0x00FFFF)
136      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
137
138      // 设置子元素垂直方向的对齐方式
139      Text('justifyContent(Center)').width('90%')
140      Column() {
141        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
142        Column().width('90%').height(30).backgroundColor(0x00FFFF)
143      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
144
145      Text('justifyContent(End)').width('90%')
146      Column() {
147        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
148        Column().width('90%').height(30).backgroundColor(0x00FFFF)
149      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
150    }.width('100%').padding({ top: 5 })
151  }
152}
153```
154
155![column](figures/column.png)
156