目录

弹性布局

排列方向

换行排列

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

实例代码

---

弹性布局

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

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

排列方向

通过设置参数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)

换行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)