• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Flex布局
2
3>  **说明：**
4> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5> - 仅当父组件是 Flex、Column、Row 时生效。
6
7
8## 属性
9
10
11| 名称 | 参数说明 | 描述 |
12| -------- | -------- | -------- |
13| flexBasis | string&nbsp;\|&nbsp;number | 设置组件在父容器主轴方向上的基准尺寸。<br/>默认值：'auto'（表示组件在主轴方向上的基准尺寸为组件原本的大小） |
14| flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。<br/>默认值：0 |
15| flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。<br/>默认值：1 |
16| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | 子组件在父容器交叉轴的对齐格式，覆盖Flex布局容器中alignItems默认配置。<br/>默认值：ItemAlign.Auto |
17
18
19## 示例
20
21```ts
22// xxx.ets
23@Entry
24@Component
25struct FlexExample {
26  build() {
27    Column({ space: 5 }) {
28      Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
29      // 基于主轴基准尺寸
30      // flexBasis()值可以是'auto',表示基准尺寸是元素本来的大小 ,也可以是长度设置，相当于.width()/.height()
31      Flex() {
32        Text('flexBasis(100)')
33          .flexBasis('100')
34          .height(100)
35          .lineHeight(70)
36          .backgroundColor(0xF5DEB3)
37          .textAlign(TextAlign.Center)
38        Text('flexBasis("auto")')
39          .flexBasis('auto')
40          .width('60%')
41          .height(100)
42          .lineHeight(70)
43          .backgroundColor(0xD2B48C)
44          .textAlign(TextAlign.Center)
45      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
46
47      Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
48      // 剩余空间所占比例
49      // flexGrow()剩余空间分配给该元素的比例
50      Flex() {
51        Text('flexGrow(2)')
52          .flexGrow(2)
53          .height(100)
54          .lineHeight(70)
55          .backgroundColor(0xF5DEB3)
56          .textAlign(TextAlign.Center)
57        Text('flexGrow(1)')
58          .flexGrow(1)
59          .height(100)
60          .lineHeight(70)
61          .backgroundColor(0xD2B48C)
62          .textAlign(TextAlign.Center)
63      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
64
65      Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
66      // flexShrink()此属性所在的组件的比例
67      // text1比例是0,其他都是默认值1,放不下时直接等比例缩放后两个,第一个不缩放
68      Flex({ direction: FlexDirection.Row }) {
69        Text('flexShrink(0)')
70          .flexShrink(0)
71          .width('50%')
72          .height(100)
73          .lineHeight(70)
74          .backgroundColor(0xF5DEB3)
75          .textAlign(TextAlign.Center)
76        Text('no flexShrink')
77          .width('40%')
78          .height(100)
79          .lineHeight(70)
80          .backgroundColor(0xD2B48C)
81          .textAlign(TextAlign.Center)
82        Text('flexShrink(2)')
83          .flexShrink(2)
84          .width('40%')
85          .height(100)
86          .lineHeight(70)
87          .backgroundColor(0xF5DEB3)
88          .textAlign(TextAlign.Center)
89      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
90
91      Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
92      // alignSelf()覆盖Flex布局容器中alignItems默认配置
93      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
94        Text('no alignSelf,height:80').width('33%').height(80)
95          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
96        Text('alignSelf stretch')
97          .alignSelf(ItemAlign.Stretch)
98          .width('33%')
99          .height(80)
100          .lineHeight(70)
101          .backgroundColor(0xD2B48C)
102          .textAlign(TextAlign.Center)
103        Text('no alignSelf,height:100').width('34%').height(100)
104          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
105      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
106    }.width('100%').margin({ top: 5 })
107  }
108}
109```
110
111![zh-cn_image_0000001219744197](figures/zh-cn_image_0000001219744197.png)
112