在 ArkTS 中，页面布局使用最多的两种容器组件是 Column 和 Row 容器。

• Column 表示沿垂直方向布局的容器。
• Row 表示沿水平方向布局的容器。

在布局容器中，存在这两根轴，即主轴和交叉轴，这两个轴是互相垂直的。不同容器中主轴的方向不一样。

• 主轴：在 Column 容器中子组件是按照从上往下的垂直方向布局的，因此其主轴方向是垂直方向；在 Row 容器中的子组件是按照从左到右的水平方向布局的，因此其主轴方向是水平方向。
  
• 交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴是水平方向，如果主轴是水平方向，则交叉轴是垂直方向。
  

属性名称	描述
justifyContent	设置子组件在主轴方向上的对齐格式
alignItems	设置子组件在交叉轴方向上的对齐格式

1、主轴方向的对齐（justifyContent）

子组件在主轴方向上的对齐方式使用 justifyContent 属性设置，其参数类型是 FlexAlign 。FlexAlign 定义了这几种类型：
FlexAlign.Start、FlexAlign.Center、FlexAlign.End、FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly。使用方式，如:

Row().justifyContent(FlexAlign.Start)
Column().justifyContent(FlexAlign.Center)

• Start：元素在主轴方向向首端对齐，如：
  
• Center：元素在主轴方向中心对齐，如：
  
• End：元素在主轴方向尾部对齐
  
• SpaceBetween：元素在主轴方向均匀分配，相邻元素之间间距相等，第一个元素与行首对齐，最后一个元素与行尾对齐。
  
• SpaceAround：元素在主轴方向均匀分配，相邻呀神农氏之间距离相同，第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
  
• SpaceEvenly：元素在主轴方向间距相等，无论是相邻元素还是边界元素到容器的距离都是一样
  

2、交叉轴方向的对齐（alignItems）

子组件在交叉轴方向上的对齐方式使用 alignItems 属性来设置。

• 在 Column 容器中，交叉轴是水平方向，其参数类型为 HorizontalAlign（水平对齐），定义了这几种类型：HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

Column().alignItems(HorizontalAlign.Start)

• 在 Row 容器中，交叉轴是垂直方向，其参数类型为 VerticalAlign（垂直对齐），定义了这几种类型：VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom

Row().alignItems(VerticalAlign.Center)

1、Column 容器交叉轴

• Start：设置子组件在水平方向上按照起始端对齐。

• Center（默认值）：设置子组件在水平方向上居中对齐

• End：设置子组件在水平方向上按照末端对齐

2、Row 容器交叉轴

• Top：设置子组件在垂直方向上居顶部对齐

• Center（默认值）：设置子组件在竖直方向上居中对齐

• Bottom：设置子组件在竖直方向上居底部对齐