Flex：主要对容器中的子元素进行排列、对齐和分配剩余空间；它允许开发者通过简单的属性设置来实现复杂的布局效果，其核心思想就是让容器能够根据子元素的大小和排列方式自动调整布局，从而实现灵活的界面设计。

主要特点：

灵活性：Flex布局可以根据容器的大小自动调整子元素的排列方式和大小。

方向性：Flex布局支持水平和垂直两种排列方向，开发者可以根据需要选择合适的排列方式。

对齐方式：Flex布局提供了多种对齐方式，如居中、两端对齐、等间距对齐等，方便开发者实现各种复杂的布局效果。

它有主轴和交叉轴概念，所谓的主轴就是水平方向，交叉轴就是垂直方向，主轴开始的位置称为主轴起始点，结束位置称为主轴结束点，交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

使用方式

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

控制方向

通过direction属性来控制子元素的方向，目前有四个可选项。

Row：

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

RowReverse：

 Flex({ direction: FlexDirection.RowReverse }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

Column：

      Flex({ direction: FlexDirection.Column }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

ColumnReverse：

      Flex({ direction: FlexDirection.ColumnReverse }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

 

控制行/列

通过wrap属性，来控制是单行/列还是多行/列排列，有三个参数可选择。

 

加上wrap属性，则就允许实现多行/列排布。 

Flex({ direction: FlexDirection.Row,wrap:FlexWrap.Wrap}) {
        Text('元素1')
          .width(100)
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Orange)
        Text('元素4')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Gray)
      }

当子元素超出容器宽度时，会自动换行

对齐方式

对其方式，有两种，一种是主轴方向，一种是交叉轴方向，主轴方向使用justifyContent属性，交叉轴方向使用alignItems。

justifyContent

 alignItems

子元素属性

除了通过Flex容器来控制之外，里面子元素也可以自由控制占位情况，比如通过flexGrow来分配剩余空间的比例，通过flexShrink，来压缩比例（默认1，可压缩）通过alignSelf来覆盖容器的交叉轴对齐方式。

比如，我们给第三个元素，设置完全占用剩余空间：

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .width(100)
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .width(100)
          .flexGrow(1)
          .backgroundColor(Color.Orange)
      }

 

在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。