# Column The **** component lays out child components vertically. ## Required Permissions None ## Child Components This component can contain child components. ## APIs Column\(options?: \{ space?: Length \}\) - Parameters

Name	Type	Mandatory	Default Value	Description
space	Length	No	0	Space between any two adjacent child components in the vertical layout.

## Attributes

Name	Type	Default Value	Description
alignItems	HorizontalAlign	Center	Alignment mode of child components in the horizontal direction.

- HorizontalAlign enums

Name	Description
Start	Aligned with the start edge in the same direction as the language in use.
Center	Center alignment. This is the default alignment mode.
End	Aligned with the end edge in the same direction as the language in use.

## Example ``` @Entry @Component struct ColumnExample { build() { Column({ space: 5 }) { Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') Column({ space: 5 }) { Column().width('100%').height(50).backgroundColor(0xAFEEEE) Column().width('100%').height(50).backgroundColor(0x00FFFF) }.width('90%').height(107).border({ width: 1 }) Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') Column() { Column().width('50%').height(50).backgroundColor(0xAFEEEE) Column().width('50%').height(50).backgroundColor(0x00FFFF) }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') Column() { Column().width('50%').height(50).backgroundColor(0xAFEEEE) Column().width('50%').height(50).backgroundColor(0x00FFFF) }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) }.width('100%').padding({ top: 5 }) } } ``` ![](figures/column.gif)