弹性布局 (Flex) 提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间

弹性布局 (Flex)

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

• FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。
  Flex({ direction: FlexDirection.Row }) {  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)
  
• FlexDirection.RowReverse：主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。
  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)
  
• FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。
  Flex({ direction: FlexDirection.Column }) {  Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)  Text('2').width('100%').height(50).backgroundColor(0xD2B48C)  Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').padding(10).backgroundColor(0xAFEEEE)
  
• FlexDirection.ColumnReverse：主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。
  Flex({ direction: FlexDirection.ColumnReverse }) {  Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)  Text('2').width('100%').height(50).backgroundColor(0xD2B48C)  Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').padding(10).backgroundColor(0xAFEEEE)
  

主轴对齐方式

通过justifyContent参数设置子元素在主轴方向的对齐方式。

• FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
  let PTopBottom:Record = { 'top': 10, 'bottom': 10 }Flex({ justifyContent: FlexAlign.Start }) {    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  Text('2').width('20%').height(50).backgroundColor(0xD2B48C)      Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(PTopBottom).backgroundColor(0xAFEEEE)
  
• FlexAlign.Center：子元素在主轴方向居中对齐。
  let PTopBottom:Record = { 'top': 10, 'bottom': 10 }Flex({ justifyContent: FlexAlign.Center }) {    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(PTopBottom).backgroundColor(0xAFEEEE)
  
• FlexAlign.End：子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
  let PTopBottom:Record = { 'top': 10, 'bottom': 10 }Flex({ justifyContent: FlexAlign.End }) {    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(PTopBottom).backgroundColor(0xAFEEEE)
  
• FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
  let PTopBottom1:Record = { 'top': 10, 'bottom': 10 }Flex({ justifyContent: FlexAlign.SpaceBetween }) {    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(PTopBottom1).backgroundColor(0xAFEEEE)
  
• FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。
  let PTopBottom:Record = { 'top': 10, 'bottom': 10 }Flex({ justifyContent: FlexAlign.SpaceAround }) {    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(PTopBottom).backgroundColor(0xAFEEEE)
  
• FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。
  let PTopBottom:Record = { 'top': 10, 'bottom': 10 }Flex({ justifyContent: FlexAlign.SpaceEvenly }) {    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(PTopBottom).backgroundColor(0xAFEEEE)
  

交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。
容器组件设置交叉轴对齐

可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。

• ItemAlign.Auto：使用Flex容器中默认配置。
  let SWh:Record = { 'width': '90%', 'height': 80 }Flex({ alignItems: ItemAlign.Auto }) {    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.size(SWh).padding(10).backgroundColor(0xAFEEEE)
  
• ItemAlign.Start：交叉轴方向首部对齐。
  let SWh:Record = { 'width': '90%', 'height': 80 }Flex({ alignItems: ItemAlign.Start }) {    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.size(SWh).padding(10).backgroundColor(0xAFEEEE)
  
• ItemAlign.Center：交叉轴方向居中对齐。
  let SWh:Record = { 'width': '90%', 'height': 80 }Flex({ alignItems: ItemAlign.Center }) {    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.size(SWh).padding(10).backgroundColor(0xAFEEEE)
  
• ItemAlign.End：交叉轴方向底部对齐。
  let SWh:Record = { 'width': '90%', 'height': 80 }Flex({ alignItems: ItemAlign.End }) {    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.size(SWh).padding(10).backgroundColor(0xAFEEEE)
  
• ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
  let SWh:Record = { 'width': '90%', 'height': 80 }Flex({ alignItems: ItemAlign.Stretch }) {    Text('1').width('33%').backgroundColor(0xF5DEB3)    Text('2').width('33%').backgroundColor(0xD2B48C)    Text('3').width('33%').backgroundColor(0xF5DEB3)}.size(SWh).padding(10).backgroundColor(0xAFEEEE)
  
• ItemAlign. Baseline：交叉轴方向文本基线对齐。
  let SWh:Record = { 'width': '90%', 'height': 80 }Flex({ alignItems: ItemAlign.Baseline }) {    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.size(SWh).padding(10).backgroundColor(0xAFEEEE)
  

子元素设置交叉轴对齐

子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。如下例所示：
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子元素居中  Text('alignSelf Start').width('25%').height(80)    .alignSelf(ItemAlign.Start)    .backgroundColor(0xF5DEB3)  Text('alignSelf Baseline')    .alignSelf(ItemAlign.Baseline)    .width('25%')    .height(80)    .backgroundColor(0xD2B48C)  Text('alignSelf Baseline').width('25%').height(100)    .backgroundColor(0xF5DEB3)    .alignSelf(ItemAlign.Baseline)  Text('no alignSelf').width('25%').height(100)    .backgroundColor(0xD2B48C)  Text('no alignSelf').width('25%').height(100)    .backgroundColor(0xF5DEB3)}.width('90%').height(220).backgroundColor(0xAFEEEE)
上例中，Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义。
内容对齐

可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：

• FlexAlign.Start：子元素各行与交叉轴起点对齐。
  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {  Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('2').width('60%').height(20).backgroundColor(0xD2B48C)  Text('3').width('40%').height(20).backgroundColor(0xD2B48C)  Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('5').width('20%').height(20).backgroundColor(0xD2B48C)}.width('90%').height(100).backgroundColor(0xAFEEEE)         
  
• FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {  Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('2').width('60%').height(20).backgroundColor(0xD2B48C)  Text('3').width('40%').height(20).backgroundColor(0xD2B48C)  Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('5').width('20%').height(20).backgroundColor(0xD2B48C)}.width('90%').height(100).backgroundColor(0xAFEEEE)         
  
• FlexAlign.End：子元素各行与交叉轴终点对齐。
  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {  Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('2').width('60%').height(20).backgroundColor(0xD2B48C)  Text('3').width('40%').height(20).backgroundColor(0xD2B48C)  Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('5').width('20%').height(20).backgroundColor(0xD2B48C)}.width('90%').height(100).backgroundColor(0xAFEEEE)         
  
• FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {  Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('2').width('60%').height(20).backgroundColor(0xD2B48C)  Text('3').width('40%').height(20).backgroundColor(0xD2B48C)  Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('5').width('20%').height(20).backgroundColor(0xD2B48C)}.width('90%').height(100).backgroundColor(0xAFEEEE)         
  
• FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {  Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('2').width('60%').height(20).backgroundColor(0xD2B48C)  Text('3').width('40%').height(20).backgroundColor(0xD2B48C)  Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('5').width('20%').height(20).backgroundColor(0xD2B48C)}.width('90%').height(100).backgroundColor(0xAFEEEE)         
  
• FlexAlign.SpaceEvenly:  子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {  Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('2').width('60%').height(20).backgroundColor(0xD2B48C)  Text('3').width('40%').height(20).backgroundColor(0xD2B48C)  Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)  Text('5').width('20%').height(20).backgroundColor(0xD2B48C)}.width('90%').height(100).backgroundColor(0xAFEEEE)         
  

场景示例

使用弹性布局，可以实现子元素沿水平方向排列，两端对齐，子元素间距平分，垂直方向上子元素居中的效果。
@Entry  @Componentstruct FlexExample {  build() {    Column() {      Column({ space: 5 }) {        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {          Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)          Text('2').width('30%').height(50).backgroundColor(0xD2B48C)          Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)        }        .height(70)        .width('90%')        .backgroundColor(0xAFEEEE)      }.width('100%').margin({ top: 5 })    }.width('100%')  }}