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)}