HarmonyOS 如何实现流式布局

@Entry 
@Component 
struct FlowLayOut { 
  @State simpleList: Array<string> = ['hkxxxjh', 'jfgutxxxiuyi', 'ujghxxxgii', 'jgihochosxxxgiowio', 
    'vjuhgjghihioxxxhoihuyoiupoujo', 'dxtdx', 'ytxxxyu','uuioyxxxfoooiuouou','iuyy5jjjxxxkxd89','uiyye9w37e9xxx2379er2739er', 
  'gu','jhhjkjgkgkghh','hgfjsgf','judsgfiusdyhfosiydhfoasiufoidsi'] 
 
 
  build() { 
    Column() { 
      Column({ space: 5 }) { 
        Text('流式布局').fontSize(20).fontColor(0xCCCCCC).width('90%') 
        // 子组件多行布局 
        Flex({ wrap: FlexWrap.Wrap }) { 
          ForEach(this.simpleList, (item: string) => { 
            ChildItem({ item: item }) 
          }, (item: string) => item) 
        } 
        .width('90%') 
        .padding(5) 
        .backgroundColor(0xCCCCCD) 
 
      }.width('100%').margin({ top: 5 }) 
    }.width('100%') 
  } 
} 
@Component 
struct ChildItem { 
  @Prop item: string; 
  build() { 
    Button(this.item,{ buttonStyle: ButtonStyleMode.NORMAL }).margin({left:5,right:5,bottom:5}) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.