Skip to content

Flex 布局 ​

备注 ​

注意

  1. 使用 Flex 最关键的一点就是 他能换行

参数 ​

wrap ​

是否换行

direction ​

排列方向

justifyContent ​

主轴对齐方式

alignItems ​

交叉轴对齐方式

属性 ​

无

事件 ​

无

示例 ​

js


@Entry
@Component
struct Index {
    build() {
      Column(){
          Flex({wrap:FlexWrap.Wrap,direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween}){
              Row(){
                  Text("232")
              }.width(60).backgroundColor(Color.Blue).height(60)
              Row(){
                  Text("232")
              }.width(60).backgroundColor(Color.Blue).height(60)
              Row(){
                  Text("232")
              }.width(60).backgroundColor(Color.Blue).height(60)
              Row(){
                  Text("232")
              }.width(60).backgroundColor(Color.Blue).height(60)
          }
          .width(200)
          .height(120)
          .backgroundColor(Color.Red)
      }
    }
}