1.垂直布局——Column

布局方向：子组件从上到下依次排列

主轴：垂直方向（控制子组件在垂直方向的对齐）

交叉轴：水平方向（控制子组件在水平方向的对齐）

2.水平布局——Row

布局方向：子组件从左到右依次排列

主轴：水平方向（控制子组件在水平方向的对齐）

交叉轴：垂直方向（控制子组件在垂直方向的对齐）

3.层叠布局--stack

Stack = 层叠容器，子组件按书写顺序上下堆叠，先写在下、后写在上（后来居上）

类比：多张卡片摞在一起，后面放的卡片盖在前一张上面

4.弹性布局--Flex

Flex 是 ArkTS 中通用弹性布局容器，是 Row/Column 的底层实现，可自由控制排列方向、换行、对齐，让子组件自适应屏幕尺寸。

4.1两条核心轴

主轴：子组件排列的方向（水平 / 垂直）

交叉轴：与主轴垂直的方向（垂直 / 水平）

4.2核心配置参数

4.2.1direction：主轴方向（4 种）

4.2.2wrap：换行规则（3 种）

4.2.3justifyContent：主轴对齐

控制子组件在主轴上的分布方式：

Start：靠起点对齐

Center：居中对齐

End：靠终点对齐

SpaceBetween：两端贴边，中间间距均分

SpaceAround：子组件两侧间距相等

SpaceEvenly：所有间距（含首尾）完全相等

4.2.4alignItems：单行交叉轴对齐

控制子组件在交叉轴上的对齐方式（仅一行时生效）：

Start：靠起点对齐

Center：居中对齐

End：靠终点对齐

Stretch：拉伸填满交叉轴

4.3代码演示

FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。

FlexWrap.Wrap：换行，每一行子元素按照主轴方向排列。

FlexAlign.Center：子元素在主轴方向居中对齐。

ItemAlign.Center：交叉轴方向居中对齐。

5.相对布局(RelativeContainer)

相对布局是让组件相对于父容器或其他组件进行定位的布局方式，核心是 “参照物 + 对齐规则”。

参照物：可以是父容器，也可以是其他兄弟组件

对齐规则：控制组件与参照物的边 / 中心对齐

5.1代码演示