弹性布局

对元素空间进行分配，常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等

容器默认存在主轴与交叉轴

排列方向

通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向

换行排列

wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

FlexWrap. NoWrap(默认值)：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。

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

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

接下来还有主轴/交叉轴对齐方式等

通过justifyContent参数设置子元素在主轴方向的对齐方式。可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。自适应拉伸则使用flexBasis属性

具体可参考：

 文档中心

实例代码

direction

登录后复制

Flex({
           
            direction: FlexDirection.RowReverse }) {
           
           
  Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

换行wrap

登录后复制

Flex({
           
            wrap: FlexWrap.Wrap }) {
           
           
  Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
} 
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.