更多内容请访问：与华为官方共建的Harmonyos技术社区https://harmonyos.51cto.com以简单demo的形式结合效果图来学习一个概览。Flex有五种类型的参数。本文讲的是justifyContent、alignItems和alignContent文本1.JustifyContentDemo默认的轴方向是Row，即行排列。本demo中的flex容器组件内边距为10，代码如下：//Example03@ComponentstructJustifyContentFlex{@PropjustifyContent:number@Proptext:stringbuild(){Column({space:5}){Text(this.text).fontSize(15).width('90%')Flex({justifyContent:this.justifyContent}){Text('1').fontSize(20).width('20%').height(50).backgroundColor(0xF5DEB3)Text('2').fontSize(20).width('20%').height(50).backgroundColor(0xFFBC79)Text('3').fontSize(20).width('20%').height(50).backgroundColor(0xD2B48C)}.width('90%').padding(10).backgroundColor(0xAFEEEE)}}}@Entry@ComponentstructFlexExample3{build(){Column({space:5}){JustifyContentFlex({text:'justifyContent:Start',justifyContent:FlexAlign.开始})JustifyContentFlex({text:'justifyContent:Center',justifyContent:FlexAlign.Center})JustifyContentFlex({text:'justifyContent:End',justifyContent:FlexAlign.End})JustifyContentFlex({text:'justifyContent:SpaceBetween',justifyContent:FlexAlign.SpaceBetween})JustifyContentFlex({text:'justifyContent:SpaceAround',justifyContent:FlexAlign.SpaceAround})JustifyContentFlex({text:'justifyContent:SpaceEvenly',justifyContent:FlexAlign.SpaceEvenly})('1.0%')}复制代码}2.AlignItemsDemo的横轴是垂直于主轴的轴。若主轴为水平方向Row，横轴为垂直方向Column；AlignItems默认值为Auto为Start；文字基线如下图，这个demo设置的文字大小为20，效果图可能不是很明显，可以调整文字大小看效果代码如下：//例子04@ComponentstructAlignItemsFlex{@PropalignItems:number@Proptext:stringbuild(){Column({space:5}){Text('alignItems:'+this.text).fontSize(15).width('90%')Flex({alignItems:this.alignItems}){Text('1').fontSize(20).width('33%').height(30).backgroundColor(0xF5DEB3)Text('2').fontSize(20).width('33%').height(40).backgroundColor(0xFFBC79)Text('3').fontSize(20).width('33%').height(50).backgroundColor(0xD2B48C)}.size({width:'90%',height:80}).padding(10).backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}}@Entry@ComponentstructFlexExample4{build(){Column(){AlignItemsFlex({text:'Auto',alignItems:ItemAlign.Auto})AlignItemsFlex({text:'Start',alignItems:ItemAlign.Start})AlignItemsFlex({text:'Center',alignItems:ItemAlign.Center})AlignItemsFlex({text:'End',alignItems:ItemAlign.End})AlignItemsFlex({text:'Stretch',alignItems:ItemAlign.Stretch})AlignItemsFlex({text:'Baseline',alignItems:ItemAlign.Baseline})}.width('100%')}}3.alignContent的demo从效果图可以看出，这里是behavioral的排列elements代码如下：//Example05@ComponentstructAlignContentFlex{@PropalignContent:number@Proptext:stringbuild(){Column({space:5}){Text('alignContent:'+this.text).fontSize(15).width('90%')Flex({wrap:FlexWrap.Wrap,alignContent:this.alignContent}){Text('1').fontSize(18).width('50%').height(20).backgroundColor(0xF5DEB3)Text('2').fontSize(18).width('50%').height(20).backgroundColor(0xFFBC79)Text('3').fontSize(18).width('50%').height(20).backgroundColor(0xD2B48C)}.size({width:'90%',height:90}).padding(10).backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}}@Entry@ComponentstructFlexExample5{build(){Column(){AlignContentFlex({text:'Start',alignContent:FlexAlign.Start})AlignContentFlex({text:'Center',alignContent:FlexAlign.Center})AlignContentFlex({text:'End',alignContent:FlexAlign.End})AlignContentFlex({text:'SpaceBetween',alignContent:FlexAlign.SpaceBetween})AlignContentFlex({text:'SpaceAround',alig2022在学习的路上继续前行！更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
