针对UI开发，首先需要了解真个UI框架的布局结构，以及布局元素有哪些。针对ArkUI，主要提供的布局方式有以下几种。
线性布局（Row、Column）
层叠布局（Stack）
弹性布局（Flex）
相对布局（RelativeContainer）
栅格布局（GridRow、GridCol）
媒体查询（@ohos.mediaquery）
列表（List）
网格（Grid）
轮播（Swiper）
我们首先来介绍下线性布局。 顾名思义。线性布局主要有两种一种是行（Row）布局，一种是列（Column）布局。
行/列的基本概念与CSS中的Flex布局基本一致
布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素：布局容器内部的元素。
主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
间距：布局子元素的间距。
Column容器内排列方向上的间距， column容期间的间距采用称为space，类似css中的Margin。
语法
显示效果
Row容器内排列方向上的间距于column类似
语法
显示效果
=============================================================
布局子元素在交叉轴上的对齐方式
在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。
alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。
Column容器内子元素在水平方向上的排列
HorizontalAlign.Start：子元素在水平方向左对齐。语法
HorizontalAlign.Center：子元素在水平方向居中对齐。
HorizontalAlign.End：子元素在水平方向右对齐。
Row容器内子元素在垂直方向上的排列
于column语法类似
// 子元素在垂直方向顶部对
.alignItems(VerticalAlign.Top)
//子元素在垂直方向居中对
.alignItems(VerticalAlign.Center)
// 子元素在垂直方向底部对
.alignItems(VerticalAlign.Bottom)
布局子元素在主轴上的排列方式
在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。
修改对应的justifyContent即可如下
.justifyContent(FlexAlign.Center)
.justifyContent(FlexAlign.End)
.justifyContent(FlexAlign.SpaceBetween)
.justifyContent(FlexAlign.SpaceEvenly)
Row容器内子元素在水平方向上的排列
更多布局模式基本与css中的flex一致，
可参考 https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-layout-development-linear-0000001504125349-V3#section14541719479
=========================
点个赞在走呗
线性布局（Row、Column）
层叠布局（Stack）
弹性布局（Flex）
相对布局（RelativeContainer）
栅格布局（GridRow、GridCol）
媒体查询（@ohos.mediaquery）
列表（List）
网格（Grid）
轮播（Swiper）
我们首先来介绍下线性布局。 顾名思义。线性布局主要有两种一种是行（Row）布局，一种是列（Column）布局。
行/列的基本概念与CSS中的Flex布局基本一致
布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素：布局容器内部的元素。
主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
间距：布局子元素的间距。
Column容器内排列方向上的间距， column容期间的间距采用称为space，类似css中的Margin。
语法
显示效果
Row容器内排列方向上的间距于column类似
语法
显示效果
=============================================================
布局子元素在交叉轴上的对齐方式
在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。
alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。
Column容器内子元素在水平方向上的排列
HorizontalAlign.Start：子元素在水平方向左对齐。语法
HorizontalAlign.Center：子元素在水平方向居中对齐。
HorizontalAlign.End：子元素在水平方向右对齐。
Row容器内子元素在垂直方向上的排列
于column语法类似
// 子元素在垂直方向顶部对
.alignItems(VerticalAlign.Top)
//子元素在垂直方向居中对
.alignItems(VerticalAlign.Center)
// 子元素在垂直方向底部对
.alignItems(VerticalAlign.Bottom)
布局子元素在主轴上的排列方式
在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。
修改对应的justifyContent即可如下
.justifyContent(FlexAlign.Center)
.justifyContent(FlexAlign.End)
.justifyContent(FlexAlign.SpaceBetween)
.justifyContent(FlexAlign.SpaceEvenly)
Row容器内子元素在水平方向上的排列
更多布局模式基本与css中的flex一致，
可参考 https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-layout-development-linear-0000001504125349-V3#section14541719479
=========================
点个赞在走呗
