在掌握了 Flex 的方向属性后，本篇将重点介绍如何通过 wrap 控制子组件是否换行，以及利用 justifyContent 在主轴方向上对其和分布。

---

一、换行控制（wrap）

enum FlexWrap {
  NoWrap,       // 不换行，超出隐藏
  Wrap,         // 正向换行
  WrapReverse,  // 反向换行
}

• NoWrap（默认）：所有子组件挤在一行/列内，超出容器会被截断或挤压。
• Wrap：当主轴空间不足时，自动换到下一行/列。
• WrapReverse：从末尾开始换行，多行顺序倒置。

1.1 NoWrap 示例

Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap })
  .size({ width: '100%', height: 60 })
  .backgroundColor(Color.Pink)
{
  for (let i = 1; i <= 7; i++) {
    Text(`Item${i}`)
      .size({ width: 120, height: 40 })
      .backgroundColor(i % 2 === 0 ? '#bbaacc' : '#aabbcc');
  }
}

超出容器后，后续 Text 会被裁剪。

1.2 Wrap 示例

Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap })
  .size({ width: '100%', height: 120 })
  .backgroundColor(Color.Pink)
{
  /* 子组件自动换行 */
}

1.3 WrapReverse 示例

Flex({ direction: FlexDirection.Row, wrap: FlexWrap.WrapReverse })
  .size({ width: '100%', height: 120 })
  .backgroundColor(Color.Pink)
{
  /* 换行方向反转：从下往上排列行 */
}

---

二、主轴对齐（justifyContent）

enum FlexAlign {
  Start,
  Center,
  End,
  SpaceBetween,
  SpaceAround,
  SpaceEvenly,
}

• Start（默认）：所有子组件紧贴主轴起点。
• Center：主轴居中分布。
• End：紧贴主轴终点。
• SpaceBetween：首末靠边，间距均等。
• SpaceAround：间距均等，首末边距为间距一半。
• SpaceEvenly：首末与间距都相等。

2.1 Start

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start })
  .size({ width: '100%', height: 60 })
  .backgroundColor(Color.Pink)
{ /* 紧贴左侧排列 */ }

2.2 Center

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center })
  /* 居中排列，左右留白相等 */

2.3 End

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End })
  /* 紧贴右侧排列 */

2.4 SpaceBetween

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween })
  /* 首末靠边，其它均等分布 */

2.5 SpaceAround

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround })
  /* 使首末与相邻间距为间距的一半 */

2.6 SpaceEvenly

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly })
  /* 所有间距（含首末）完全一致 */

---

三、应用场景

• 水平按钮组：justifyContent: SpaceBetween 保证两端按钮对齐，中间按钮自动分散。
• 标签云：配合 wrap 实现多行、换行后对齐。
• 居中组件：Center 和 SpaceEvenly 让少量元素在主轴上均衡留白。

---

四、性能与优化

• 尽量减少过度换行。
• 对于简单水平/竖直布局，不必使用 Flex 的换行能力，可选 Row/Column。
• 合理设置固定与弹性尺寸（layoutWeight）平衡渲染效率。