HarmonyOs之Column容器和Row容器详解

1 Column容器

Column和Row布局，主轴的排列方式默认是Start，交叉轴的排列方式默认是Center

1.1 声明Column

语法：

Column({?space:10}){//？代表是属性可选的在这里插入图片描述

	//内容
}
.width("100%")
.height("100%")
.justifyContent(FlexAlign.center)
.alignItems(HorizontalAlign.center)

1.2 属性

子元素在主轴方向的排列方式.justifyContent(FlexAlign.属性值)的属性值有：

• start 元素在主轴方向首端对齐
• center 主轴居中排列
• end 元素在主轴方向尾部对齐
• spaceBetween 主轴方向两端贴边，中间平分
• spaceAround 主轴方向元素与元素之间的距离是首尾元素和两端距离的两倍
• spaceEvenly 主轴方向元素与元素以及首尾元素和两端的距离相等
  
  

子元素在交叉轴轴方向的排列方式.alignItems(HorizontalAlign.属性值)的属性值有：

• start 元素在交叉轴方向首端对齐
• center 元素在交叉轴方向居中排列
• end 元素在交叉轴方向尾部对齐
  

2 Row容器

Column和Row布局，主轴的排列方式默认是Start，交叉轴的排列方式默认是Center

2.1 声明Row

Row({?space:10}){
	//内容
}
.width("100%")
.height("100%")
.justifyContent(FlexAlign.center)
.alignItems(VerticalAlign.center)

2.2 属性

子元素在主轴方向的排列方式.justifyContent(FlexAlign.属性值)的属性值有：

• start 元素在主轴方向首端对齐
• center 元素在主轴居中排列
• end 元素在主轴方向尾部对齐
• spaceBetween 主轴方向两端贴边，中间平分
• spaceAround 主轴方向元素与元素之间的距离是首尾元素和两端距离的两倍
• spaceEvenly 主轴方向元素与元素以及首尾元素和两端的距离相等
  

子元素在交叉轴轴方向的排列方式.alignItems(VerticalAlign.属性值)的属性值有：

• start 元素在交叉轴方向首端对齐
• center 元素在交叉轴方向居中排列
• end 元素在交叉轴方向尾部对齐