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 元素在交叉轴方向尾部对齐