1.主轴对齐方式.justifyContent
build() {Column(){Text().width(200).height(100).backgroundColor(Color.Yellow).border({width:2})Text().width(200).height(100).backgroundColor(Color.Yellow).border({width:2}).margin(10)Text().width(200).height(100).backgroundColor(Color.Yellow).border({width:2})}.width('100%').height('100%').justifyContent(FlexAlign.SpaceBetween) }
}2.交叉轴对齐方式.alignItems()
交叉轴水平方向：HorizontalAlign
交叉轴垂直方向：VerticalAlign
build() {Column(){Text().width(200).height(100).backgroundColor(Color.Yellow).border({width:2})Text().width(200).height(100).backgroundColor(Color.Yellow).border({width:2}).margin({top:10,bottom:10})Text().width(200).height(100).backgroundColor(Color.Yellow).border({width:2})}.width('100%').height('100%').justifyContent(FlexAlign.SpaceBetween).alignItems(HorizontalAlign.End)}
3.自适应伸缩.layoutWeight()
按照份数权重，分配剩余空间
build() {Row(){Text('老大').backgroundColor(Color.Blue).layoutWeight(1) //占剩余空间权重Text('老二').backgroundColor(Color.Yellow).layoutWeight(2)Text('老三').backgroundColor(Color.Red).layoutWeight(1)}.width('100%').height('100%').backgroundColor(Color.Gray)}
4.Blank() 填充空白区域，像弹簧
5.Checkbox()复选框
6.Text(){Span(‘1’)Span(‘2’)}
7.弹性布局Flex
build() {Flex({direction:FlexDirection.Row, //主轴方向justifyContent:FlexAlign.SpaceBetween, //主轴方式alignItems:ItemAlign.Center //交叉轴方式}){Text().width(100).height(100).backgroundColor(Color.Yellow).border({width:2})Text().width(100).height(100).backgroundColor(Color.Yellow).border({width:2})Text().width(100).height(100).backgroundColor(Color.Yellow).border({width:2})}.width('100%').height('90%').backgroundColor(Color.Green)}
弹性布局Flex 多行
Column(){Flex({wrap:FlexWrap.Wrap //设置多行}){Text('我是他').backgroundColor(Color.Gray).margin({right:5,bottom:5}).padding(4)Text('他不是我').backgroundColor(Color.Gray).margin({right:5}).padding(4)Text('我到底是谁').backgroundColor(Color.Gray).margin({right:5}).padding(4)Text('你是？').backgroundColor(Color.Gray).margin({right:5}).padding(4)Text('到底是什么').backgroundColor(Color.Gray).margin({right:5}).padding(4)}}.width('100%').height('100%')}
8.绝对定位：控制组件位置，实现层叠效果
build() {Column(){Text().width(200).height(100).backgroundColor(Color.Yellow).border({width:2})Text().width(200).height(100).backgroundColor(Color.Blue).border({width:2})//绝对定位 控制位置，层叠效果.position({x:0,y:0})//zindex设置层级.zIndex(-1)Text().width(200).height(100).backgroundColor(Color.Red).border({width:2})}.width('100%').height('100%')}
9.层叠布局Stack（）{}
build() {//层叠方位Stack({alignContent:Alignment.TopEnd}){Text('黄药师').width(250).height(500).backgroundColor(Color.Yellow)Text('黄蓉').width(200).height(400).backgroundColor(Color.Red)Text('郭襄').width(150).height(300).backgroundColor(Color.Blue)}.width(300).height(600).backgroundColor(Color.Pink)}
