弹性布局例题展示和基础

弹性布局全称弹性盒子布局（Flexible Box Layout，简称 Flex），是一套一维布局模型，核心是让容器内部子元素具备弹性伸缩能力，可灵活控制子组件排列方向、对齐方式、剩余空间分配，完美适配不同尺寸屏幕的响应式界面。 核心特点：

1. 一维特性：单次仅沿主轴（水平 / 垂直）排布元素；
2. 弹性伸缩：子元素可自动放大填充空白、缩小避免溢出；
3. 对齐简便：一键实现水平、垂直居中、均分、两端对齐等复杂排版。

eg：

Entry
@Component
struct FlexDemo{
  build() {
    Flex({direction: FlexDirection.Row,wrap:FlexWrap.Wrap}){
      Text('1').width('49%').height(50).backgroundColor('#F5DEB3')
      Text('2').width('49%').height(50).backgroundColor('#D2B48C')
      Text('3').width('49%').height(50).backgroundColor('#F5DE83')
      Text('4').width('49%').height(50).backgroundColor('#D2B48C')
      Text('5').width('49%').height(50).backgroundColor('#F5DE83')
      Text('6').width('49%').height(50).backgroundColor('#D2B48C')
    }
    .height(70)
    .width('90%')
    .padding(10)
    .backgroundColor('#AFEEEE')
  }
}

成品展示：

eg：

@Entry
@Component
struct FlexDemo2{
  build() {
    Flex({wrap:FlexWrap.Wrap}){
      Text("鸿蒙基础").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16).margin(1)
      Text("ArskTS语法").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16).margin(1)
      Text("ArkUI布局").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16).margin(1)
      Text("组件开发").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16).margin(1)
      Text("页面跳转").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16).margin(1)
      Text("数据存储").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16).margin(1)
    }
    .width('100%')
    .padding(10)
  }
}

成品展示：