一、基础概念铺垫

1. 线性布局容器

ArkUI 提供两个基础线性容器：

1. Row：横向线性布局，主轴为水平方向，从左到右；交叉轴垂直
2. Column：纵向线性布局，主轴为垂直方向，从上到下；交叉轴水平

justifyContent是容器的属性，作用是控制子组件在主轴上的对齐、空间分配，接收枚举类型FlexAlign。

2. 核心区分：主轴 vs 交叉轴

justifyContent：主轴排布（Row 水平、Column 垂直）

alignItems：交叉轴排布（Row 垂直、Column 水平） 很多初学者写布局时搞混这两个，记住一句话：主轴用 justify，交叉轴用 align。

基础测试模板（Row 横向布局通用）

后面所有 FlexAlign 效果都用这段基础代码测试，只需要切换justifyContent里的枚举值即可：

@Entry
@Component
struct RowJustifyDemo {
  build() {
    Column() {
      Row() {
        Text("1").width(80).height(80).fontSize(22).textAlign(TextAlign.Center).backgroundColor("#409EFF").fontColor("#fff")
        Text("2").width(80).height(80).fontSize(22).textAlign(TextAlign.Center).backgroundColor("#67C23A").fontColor("#fff")
        Text("3").width(80).height(80).fontSize(22).textAlign(TextAlign.Center).backgroundColor("#E6A23C").fontColor("#fff")
      }
      .width("100%")
      .height(160)
      .border({ width: 1, color: "#ccc" })
      // 此处修改FlexAlign枚举
      .justifyContent(FlexAlign.Start)
    }
    .padding(20)
  }
}

二、FlexAlign 六大枚举值逐个详解

1. FlexAlign.Start（默认值）

效果：所有子组件向主轴起始端靠拢

Row 场景：全部靠左排列，剩余空白留在容器右侧

Column 场景：全部靠上排列，剩余空白留在容器底部

适用场景：常规列表、从左到右依次摆放的按钮、顶部标签栏，是最常用默认布局

Row()
  .justifyContent(FlexAlign.Start)

2. FlexAlign.End

效果：所有子组件向主轴末端靠拢

Row 场景：全部靠右，空白空间在左侧

Column 场景：全部靠下，空白空间在顶部

业务场景：页面右上角操作按钮、弹窗底部取消 / 确认右置、个人中心右侧功能入口

Row()
  .justifyContent(FlexAlign.End)

3. FlexAlign.Center

效果：子组件整体在主轴居中，容器两端空白均等

Row：水平居中；Column：垂直居中

高频场景：页面居中标题、弹窗中间按钮、底部居中操作栏，日常开发用得极多

Row()
  .justifyContent(FlexAlign.Center)

4. FlexAlign.SpaceBetween

效果：两端贴边，子组件间隙均分 第一个子组件紧贴主轴起点，最后一个紧贴主轴终点；只有元素之间分配空白，容器左右 / 上下无留白

经典场景：头部左侧 logo + 右侧个人头像、表单左右分布文字与输入框、卡片两端文字

Row()
  .justifyContent(FlexAlign.SpaceBetween)

5. FlexAlign.SpaceAround

效果：每个子组件左右都包裹均等空白 直观视觉：元素之间的间距 = 容器边缘留白 × 2 容器首尾会留出一小段空白，不会贴紧边界

适用：少量功能图标均匀散开，不想贴紧屏幕左右边缘的布局

Row()
  .justifyContent(FlexAlign.SpaceAround)

6. FlexAlign.SpaceEvenly

效果：全部空隙完全均分 容器开头、元素间隙、容器结尾的空白宽度完全相等，是三者里间距最均匀的一种

和 SpaceAround 区分：

       SpaceAround：中间空隙 = 边缘空隙 ×2

       SpaceEvenly：所有空隙大小一模一样

适用：底部 tab 栏、多个均等分布的功能按钮

Row()
  .justifyContent(FlexAlign.SpaceEvenly)

四、切换 Column 纵向布局，主轴对齐逻辑不变

很多人只会在 Row 里用 justifyContent，换到 Column 就懵了，核心逻辑不变，只是主轴变成垂直方向。

举个垂直居中示例：

Column() {
  Text("A").width(100).height(80).backgroundColor("#409EFF")
  Text("B").width(100).height(80).backgroundColor("#67C23A")
  Text("C").width(100).height(80).backgroundColor("#E6A23C")
}
.width(300)
.height(400)
.border({width:1,color:'#ccc'})
// 垂直主轴居中
.justifyContent(FlexAlign.Center)

同理：

Column + SpaceBetween：第一个元素置顶，最后一个置底，中间均分空白

Column + End：所有元素全部贴容器底部

六、踩坑小总结

1. 子组件总宽度超出 Row 容器宽度时，justifyContent 会失效   解决：给子组件设置flexShrink(1)允许自动压缩，或者缩小子组件尺寸
2. justifyContent 只作用于直接子组件，嵌套内层组件不生效
3. Row 主轴水平、Column 主轴垂直，不要记反；交叉轴对齐用 alignItems
4. 三个均匀分配枚举速记：
   • SpaceBetween：两头贴边，中间分空隙
   • SpaceAround：元素自带左右留白，中间双倍间距
   • SpaceEvenly：从头到尾所有空隙完全相等
5. 默认值是 FlexAlign.Start，绝大多数从左到右排列的布局不用额外写