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