鸿蒙开发系列教程（十二）--布局应用：Flex布局

相关属性参数与css3的flex布局参数相似

排列方向：direction: FlexDirection.Row,
换行：wrap: FlexWrap.NoWrap,
水平垂直对齐方式： justifyContent: FlexAlign. SpaceBetween,
alignItems: ItemAlign.Center

@Entry  
@Component
struct 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%') 
 }
}