鸿蒙ArkUI开发：常用布局【交叉轴】

交叉轴

1. 垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。
2. 通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式
3. alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性
4. 开发前请熟悉鸿蒙开发指导文档：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

Column容器内子元素在水平方向上的排列

typescript
复制代码
Column() {
...
}.alignItems(HorizontalAlign.Start)

1. HorizontalAlign.Start：子元素在水平方向左对齐
2. HorizontalAlign.Center：子元素在水平方向居中对齐
3. HorizontalAlign.End：子元素在水平方向右对齐。

Row容器内子元素在垂直方向上的排列

typescript
复制代码
Row() {
...
}.alignItems(VerticalAlign.Top)

1. VerticalAlign.Top：子元素在垂直方向顶部对齐
2. VerticalAlign.Center：子元素在垂直方向居中对齐
3. VerticalAlign.Bottom：子元素在垂直方向底部对齐

层叠布局（Stack）

1. 层叠布局主要用于实现基于Z轴的布局，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以通过zIndex设置位置
2. 可以通过[alignContent参数]实现位置的相对移动

typescript
复制代码
Stack({ alignContent: Alignment.BottomStart })

`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

弹性布局（Flex）

1. Row和Column容器只支持单方向的布局。你可以把Flex理解为它俩的升级版，能更灵活的控制布局方向和子元素布局。
2. 可以设置布局方向，是否自动换行等

审核编辑 黄宇