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| 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```ts
104// xxx.ets
105@Entry
106@Component
107struct ColumnExample {
108  build() {
109    Column({ space: 5 }) {
110      // 设置子元素垂直方向间距为5
111      Text('space').width('90%')
112      Column({ space: 5 }) {
113        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
114        Column().width('100%').height(30).backgroundColor(0x00FFFF)
115      }.width('90%').height(100).border({ width: 1 })
116
117      // 设置子元素水平方向对齐方式
118      Text('alignItems(Start)').width('90%')
119      Column() {
120        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
121        Column().width('50%').height(30).backgroundColor(0x00FFFF)
122      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
123
124      Text('alignItems(End)').width('90%')
125      Column() {
126        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
127        Column().width('50%').height(30).backgroundColor(0x00FFFF)
128      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
129
130      Text('alignItems(Center)').width('90%')
131      Column() {
132        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
133        Column().width('50%').height(30).backgroundColor(0x00FFFF)
134      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
135
136      // 设置子元素垂直方向的对齐方式
137      Text('justifyContent(Center)').width('90%')
138      Column() {
139        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
140        Column().width('90%').height(30).backgroundColor(0x00FFFF)
141      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
142
143      Text('justifyContent(End)').width('90%')
144      Column() {
145        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
146        Column().width('90%').height(30).backgroundColor(0x00FFFF)
147      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
148    }.width('100%').padding({ top: 5 })
149  }
150}
151```
152
153![column](figures/column.png)
154