✨ 从 “盒子模型” 到 “自动换行”，一文看懂！
大家好，今天跟大家唠唠 ArkTS 里用得最多的 Flex 布局，新手入门必看，看完再也不担心页面乱成麻了！
一、Flex 布局是什么？
简单说，它就是一个 “弹性盒子”，里面的子元素可以自动按行或按列排列，还能自动换行、均匀分布，做导航栏、标签页、商品列表都超方便！
核心参数就这几个：
direction：子元素排列方向（Row 水平 /Column 垂直）
wrap：是否自动换行（Wrap 超出宽度就换行）
justifyContent：主轴方向的对齐方式（居中 / 两端对齐）
二、直接上代码！（可复制运行）
typescript
运行
@Entry
@Component
struct FlexDemo {
  build() {
    Column({ space: 20 }) {
      // 1. 水平均匀分布导航栏
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
        Button("首页").width(80).height(40)
        Button("分类").width(80).height(40)
        Button("我的").width(80).height(40)
      }
      .width('100%')

      // 2. 自动换行标签页
      Flex({ wrap: FlexWrap.Wrap }) {
        Text("鸿蒙基础").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)
        Text("ArkTS语法").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)
        Text("ArkUI布局").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)
        Text("组件开发").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).margin(5)
      }
      .width('100%')
      .padding(10)
    }
    .padding(20)
  }
}
三、新手避坑小 Tips
子元素宽度总和超过父容器宽度时，记得设置 wrap: FlexWrap.Wrap，不然会挤成一团！
justifyContent: FlexAlign.SpaceAround 会让子元素均匀分布在主轴上，做导航栏超好用。
垂直居中可以配合 alignItems: ItemAlign.Center 实现，不用手动算边距。
学会这招，再也不用为页面布局秃头啦！# 鸿蒙开发 #ArkTS #前端入门