十八、组件-容器组件-column、row、flex

@Entry
@Component
struct ColumExample {

  build() {
    Column({space:10}) {
      Column() {
        Column().width('50%').height(30).backgroundColor(Color.Blue)
        Column().width('60%').height(40).backgroundColor(Color.Brown)
      }
      .width('90%')
      .height(100)
      .border({width:1,color:Color.Red})
      .alignItems(HorizontalAlign.Start) //水平对齐
      .justifyContent(FlexAlign.SpaceEvenly) //垂直对齐


      Row() {
        Row().width('30%').height(30).backgroundColor(Color.Blue)
        Row().width('40%').height(40).backgroundColor(Color.Brown)
      }
      .width('90%')
      .height(100)
      .border({width:1,color:Color.Red})
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Flex({
        direction:FlexDirection.Row,
        justifyContent:FlexAlign.SpaceAround,
        alignItems:ItemAlign.Center,
        wrap:FlexWrap.WrapReverse,
        alignContent:FlexAlign.End
      }){
        Text('1').width('5%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('20%').height(60).backgroundColor(0xD2B48C)
        Text('3').width('30%').height(70).backgroundColor(0xF5DEB3)
        Text('4').width('15%').height(55).backgroundColor(0xD2B48C)
      }
      .height(160)
      .width('90%')
      .backgroundColor(0xAFEEEE)





    }
    .margin(20)
  }
}