1# 弹性布局 (Flex)
2
3
4## 概述
5
6弹性布局（[Flex](../reference/apis-arkui/arkui-ts/ts-container-flex.md)）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
7
8容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。
9
10
11
12  **图1** 主轴为水平方向的Flex容器示意图  
13
14![flex-layout](figures/flex-layout.png)
15
16
17## 基本概念
18
19- 主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
20
21- 交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。
22
23
24## 布局方向
25
26在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。
27
28  **图2** 弹性布局方向图  
29
30![flex-layout-direction](figures/flex-layout-direction.png)
31
32- FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。
33
34
35  ```ts
36  Flex({ direction: FlexDirection.Row }) {
37    Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
38    Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
39    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
40  }
41  .height(70)
42  .width('90%')
43  .padding(10)
44  .backgroundColor(0xAFEEEE)
45  ```
46
47  ![zh-cn_image_0000001562820817](figures/zh-cn_image_0000001562820817.png)
48
49- FlexDirection.RowReverse：主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。
50
51
52  ```ts
53  Flex({ direction: FlexDirection.RowReverse }) {
54    Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
55    Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
56    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
57  }
58  .height(70)
59  .width('90%')
60  .padding(10)
61  .backgroundColor(0xAFEEEE)
62  ```
63
64  ![zh-cn_image_0000001511900464](figures/zh-cn_image_0000001511900464.png)
65
66- FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。
67
68
69  ```ts
70  Flex({ direction: FlexDirection.Column }) {
71    Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
72    Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
73    Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
74  }
75  .height(70)
76  .width('90%')
77  .padding(10)
78  .backgroundColor(0xAFEEEE)
79  ```
80
81  ![zh-cn_image_0000001511580884](figures/zh-cn_image_0000001511580884.png)
82
83- FlexDirection.ColumnReverse：主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。
84
85
86  ```ts
87  Flex({ direction: FlexDirection.ColumnReverse }) {
88    Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
89    Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
90    Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
91  }
92  .height(70)
93  .width('90%')
94  .padding(10)
95  .backgroundColor(0xAFEEEE)
96  ```
97
98  ![zh-cn_image_0000001562940541](figures/zh-cn_image_0000001562940541.png)
99
100
101## 布局换行
102
103弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。
104
105- FlexWrap. NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
106
107
108  ```ts
109  Flex({ wrap: FlexWrap.NoWrap }) {
110    Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
111    Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
112    Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
113  }
114  .width('90%')
115  .padding(10)
116  .backgroundColor(0xAFEEEE)
117  ```
118
119  ![zh-cn_image_0000001562700425](figures/zh-cn_image_0000001562700425.png)
120
121- FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。
122
123
124  ```ts
125  Flex({ wrap: FlexWrap.Wrap }) {
126    Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
127    Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
128    Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
129  }
130  .width('90%')
131  .padding(10)
132  .backgroundColor(0xAFEEEE)
133  ```
134
135  ![zh-cn_image_0000001511740468](figures/zh-cn_image_0000001511740468.png)
136
137- FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。
138
139
140  ```ts
141  Flex({ wrap: FlexWrap.WrapReverse}) {
142    Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
143    Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
144    Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
145  }
146  .width('90%')
147  .padding(10)
148  .backgroundColor(0xAFEEEE)
149  ```
150
151  ![zh-cn_image_0000001562940521](figures/zh-cn_image_0000001562940521.png)
152
153
154## 主轴对齐方式
155
156通过justifyContent参数设置子元素在主轴方向的对齐方式。
157
158![flex-spindle-alignment](figures/flex-spindle-alignment.png)
159
160
161- FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
162
163
164  ```ts
165  let PTopBottom:Record<string,number> = { 'top': 10, 'bottom': 10 }
166  Flex({ justifyContent: FlexAlign.Start }) {
167    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
168    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
169    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
170  }
171  .width('90%')
172  .padding(PTopBottom)
173  .backgroundColor(0xAFEEEE)
174  ```
175
176  ![zh-cn_image_0000001511421280](figures/zh-cn_image_0000001511421280.png)
177
178- FlexAlign.Center：子元素在主轴方向居中对齐。
179
180
181  ```ts
182  let PTopBottom:Record<string,number> = { 'top': 10, 'bottom': 10 }
183  Flex({ justifyContent: FlexAlign.Center }) {
184    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
185    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
186    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
187  }
188  .width('90%')
189  .padding(PTopBottom)
190  .backgroundColor(0xAFEEEE)
191  ```
192
193  ![zh-cn_image_0000001563060681](figures/zh-cn_image_0000001563060681.png)
194
195- FlexAlign.End：子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
196
197
198  ```ts
199  let PTopBottom:Record<string,number> = { 'top': 10, 'bottom': 10 }
200  Flex({ justifyContent: FlexAlign.End }) {
201    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
202    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
203    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
204  }
205  .width('90%')
206  .padding(PTopBottom)
207  .backgroundColor(0xAFEEEE)
208  ```
209
210  ![zh-cn_image_0000001562820809](figures/zh-cn_image_0000001562820809.png)
211
212- FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
213
214
215  ```ts
216  let PTopBottom1:Record<string,number> = { 'top': 10, 'bottom': 10 }
217  Flex({ justifyContent: FlexAlign.SpaceBetween }) {
218    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
219    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
220    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
221  }
222  .width('90%')
223  .padding(PTopBottom1)
224  .backgroundColor(0xAFEEEE)
225  ```
226
227  ![zh-cn_image_0000001511421288](figures/zh-cn_image_0000001511421288.png)
228
229- FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。
230
231
232  ```ts
233  let PTopBottom:Record<string,number> = { 'top': 10, 'bottom': 10 }
234  Flex({ justifyContent: FlexAlign.SpaceAround }) {
235    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
236    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
237    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
238  }
239  .width('90%')
240  .padding(PTopBottom)
241  .backgroundColor(0xAFEEEE)
242  ```
243
244  ![zh-cn_image_0000001511900436](figures/zh-cn_image_0000001511900436.png)
245
246- FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。
247
248
249  ```ts
250  let PTopBottom:Record<string,number> = { 'top': 10, 'bottom': 10 }
251  Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
252    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
253    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
254    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
255  }
256  .width('90%')
257  .padding(PTopBottom)
258  .backgroundColor(0xAFEEEE)
259  ```
260
261  ![zh-cn_image_0000001563060713](figures/zh-cn_image_0000001563060713.png)
262
263
264## 交叉轴对齐方式
265
266容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。
267
268
269### 容器组件设置交叉轴对齐
270
271可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。
272
273
274- ItemAlign.Auto：使用Flex容器中默认配置。
275
276
277  ```ts
278  let SWh:Record<string,number|string> = { 'width': '90%', 'height': 80 }
279  Flex({ alignItems: ItemAlign.Auto }) {
280    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
281    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
282    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
283  }
284  .size(SWh)
285  .padding(10)
286  .backgroundColor(0xAFEEEE)
287  ```
288
289  ![zh-cn_image_0000001563060677](figures/zh-cn_image_0000001563060677.png)
290
291- ItemAlign.Start：交叉轴方向首部对齐。
292
293
294  ```ts
295  let SWh:Record<string,number|string> = { 'width': '90%', 'height': 80 }
296  Flex({ alignItems: ItemAlign.Start }) {
297    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
298    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
299    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
300  }
301  .size(SWh)
302  .padding(10)
303  .backgroundColor(0xAFEEEE)
304  ```
305
306  ![zh-cn_image_0000001562700453](figures/zh-cn_image_0000001562700453.png)
307
308- ItemAlign.Center：交叉轴方向居中对齐。
309
310
311  ```ts
312  let SWh:Record<string,number|string> = { 'width': '90%', 'height': 80 }
313  Flex({ alignItems: ItemAlign.Center }) {
314    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
315    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
316    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
317  }
318  .size(SWh)
319  .padding(10)
320  .backgroundColor(0xAFEEEE)
321  ```
322
323  ![zh-cn_image_0000001511740484](figures/zh-cn_image_0000001511740484.png)
324
325- ItemAlign.End：交叉轴方向底部对齐。
326
327
328  ```ts
329  let SWh:Record<string,number|string> = { 'width': '90%', 'height': 80 }
330  Flex({ alignItems: ItemAlign.End }) {
331    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
332    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
333    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
334  }
335  .size(SWh)
336  .padding(10)
337  .backgroundColor(0xAFEEEE)
338  ```
339
340  ![zh-cn_image_0000001511580876](figures/zh-cn_image_0000001511580876.png)
341
342- ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
343
344
345  ```ts
346  let SWh:Record<string,number|string> = { 'width': '90%', 'height': 80 }
347  Flex({ alignItems: ItemAlign.Stretch }) {
348    Text('1').width('33%').backgroundColor(0xF5DEB3)
349    Text('2').width('33%').backgroundColor(0xD2B48C)
350    Text('3').width('33%').backgroundColor(0xF5DEB3)
351  }
352  .size(SWh)
353  .padding(10)
354  .backgroundColor(0xAFEEEE)
355  ```
356
357  ![zh-cn_image_0000001511421252](figures/zh-cn_image_0000001511421252.png)
358
359- ItemAlign. Baseline：交叉轴方向文本基线对齐。
360
361
362  ```ts
363  let SWh:Record<string,number|string> = { 'width': '90%', 'height': 80 }
364  Flex({ alignItems: ItemAlign.Baseline }) {
365    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
366    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
367    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
368  }
369  .size(SWh)
370  .padding(10)
371  .backgroundColor(0xAFEEEE)
372  ```
373
374  ![zh-cn_image_0000001511900440](figures/zh-cn_image_0000001511900440.png)
375
376
377### 子元素设置交叉轴对齐
378
379子元素的[alignSelf](../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#alignself)属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。如下例所示：
380
381```ts
382Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子元素居中
383  Text('alignSelf Start').width('25%').height(80)
384    .alignSelf(ItemAlign.Start)
385    .backgroundColor(0xF5DEB3)
386  Text('alignSelf Baseline')
387    .alignSelf(ItemAlign.Baseline)
388    .width('25%')
389    .height(80)
390    .backgroundColor(0xD2B48C)
391  Text('alignSelf Baseline').width('25%').height(100)
392    .backgroundColor(0xF5DEB3)
393    .alignSelf(ItemAlign.Baseline)
394  Text('no alignSelf').width('25%').height(100)
395    .backgroundColor(0xD2B48C)
396  Text('no alignSelf').width('25%').height(100)
397    .backgroundColor(0xF5DEB3)
398
399}.width('90%').height(220).backgroundColor(0xAFEEEE)
400```
401
402
403![zh-cn_image_0000001562940533](figures/zh-cn_image_0000001562940533.png)
404
405
406上例中，Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义。
407
408
409### 内容对齐
410
411可以通过[alignContent](../reference/apis-arkui/arkui-ts/ts-container-flex.md#接口)参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：
412
413- FlexAlign.Start：子元素各行与交叉轴起点对齐。
414
415
416  ```ts
417  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
418    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
419    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
420    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
421    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
422    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
423  }
424  .width('90%')
425  .height(100)
426  .backgroundColor(0xAFEEEE)
427  ```
428
429  ![zh-cn_image_0000001511900460](figures/zh-cn_image_0000001511900460.png)
430
431- FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
432
433
434  ```ts
435  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
436    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
437    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
438    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
439    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
440    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
441  }
442  .width('90%')
443  .height(100)
444  .backgroundColor(0xAFEEEE)
445  ```
446
447  ![zh-cn_image_0000001511421256](figures/zh-cn_image_0000001511421256.png)
448
449- FlexAlign.End：子元素各行与交叉轴终点对齐。
450
451
452  ```ts
453  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
454    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
455    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
456    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
457    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
458    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
459  }
460  .width('90%')
461  .height(100)
462  .backgroundColor(0xAFEEEE)
463  ```
464
465  ![zh-cn_image_0000001562820801](figures/zh-cn_image_0000001562820801.png)
466
467- FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
468
469
470  ```ts
471  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
472    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
473    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
474    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
475    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
476    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
477  }
478  .width('90%')
479  .height(100)
480  .backgroundColor(0xAFEEEE)
481  ```
482
483  ![zh-cn_image_0000001511900448](figures/zh-cn_image_0000001511900448.png)
484
485- FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
486
487
488  ```ts
489  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
490    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
491    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
492    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
493    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
494    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
495  }
496  .width('90%')
497  .height(100)
498  .backgroundColor(0xAFEEEE)
499  ```
500
501  ![zh-cn_image_0000001562700445](figures/zh-cn_image_0000001562700445.png)
502
503- FlexAlign.SpaceEvenly:  子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
504
505
506  ```ts
507  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
508    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
509    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
510    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
511    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
512    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
513  }
514  .width('90%')
515  .height(100)
516  .backgroundColor(0xAFEEEE)
517  ```
518
519  ![zh-cn_image_0000001511580864](figures/zh-cn_image_0000001511580864.png)
520
521
522## 自适应拉伸
523
524在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。
525
526- [flexBasis](../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#flexbasis)：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。
527
528
529  ```ts
530  Flex() {
531    Text('flexBasis("auto")')
532      .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽度
533      .height(100)
534      .backgroundColor(0xF5DEB3)
535    Text('flexBasis("auto")'+' width("40%")')
536      .width('40%')
537      .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值
538      .height(100)
539      .backgroundColor(0xD2B48C)
540
541    Text('flexBasis(100)')  // 未设置width以及flexBasis值为100，宽度为100vp
542      .flexBasis(100)
543      .height(100)
544      .backgroundColor(0xF5DEB3)
545
546    Text('flexBasis(100)')
547      .flexBasis(100)
548      .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp
549      .height(100)
550      .backgroundColor(0xD2B48C)
551  }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
552  ```
553
554  ![zh-cn_image_0000001562940505](figures/zh-cn_image_0000001562940505.png)
555
556- [flexGrow](../reference/apis-arkui//arkui-ts/ts-universal-attributes-flex-layout.md#flexgrow)：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。
557
558  ```ts
559  Flex() {
560    Text('flexGrow(2)')
561      .flexGrow(2)
562      .width(100)
563      .height(100)
564      .backgroundColor(0xF5DEB3)
565    Text('flexGrow(3)')
566      .flexGrow(3)
567      .width(100)
568      .height(100)
569      .backgroundColor(0xD2B48C)
570
571    Text('no flexGrow')
572      .width(100)
573      .height(100)
574      .backgroundColor(0xF5DEB3)
575  }.width(420).height(120).padding(10).backgroundColor(0xAFEEEE)
576  ```
577
578  ![zh-cn_image_0000001562700449](figures/zh-cn_image_0000001562700449.png)
579
580  父容器宽度420vp，三个子元素原始宽度为100vp，左右padding为20vp，总和320vp，剩余空间100vp根据flexGrow值的占比分配给子元素，未设置flexGrow的子元素不参与“瓜分”。
581
582  第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp * 2/5=140vp，第二个元素为100vp+100vp * 3/5=160vp。
583
584- [flexShrink](../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#flexshrink): 当父容器空间不足时，子元素的压缩比例。
585
586
587  ```ts
588  Flex({ direction: FlexDirection.Row }) {
589    Text('flexShrink(3)')
590      .flexShrink(3)
591      .width(200)
592      .height(100)
593      .backgroundColor(0xF5DEB3)
594
595    Text('no flexShrink')
596      .width(200)
597      .height(100)
598      .backgroundColor(0xD2B48C)
599
600    Text('flexShrink(2)')
601      .flexShrink(2)
602      .width(200)
603      .height(100)
604      .backgroundColor(0xF5DEB3)
605  }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
606  ```
607
608  ![zh-cn_image_0000001562820813](figures/zh-cn_image_0000001562820813.png)
609
610
611## 场景示例
612
613使用弹性布局，可以实现子元素沿水平方向排列，两端对齐，子元素间距平分，垂直方向上子元素居中的效果。
614
615
616```ts
617@Entry
618@Component
619struct FlexExample {
620  build() {
621    Column() {
622      Column({ space: 5 }) {
623        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
624          Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)
625          Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
626          Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
627        }
628        .height(70)
629        .width('90%')
630        .backgroundColor(0xAFEEEE)
631      }.width('100%').margin({ top: 5 })
632    }.width('100%')
633 }
634}
635```
636
637![zh-cn_image_0000001511900452](figures/zh-cn_image_0000001511900452.png)
638
639## 相关实例
640
641针对Flex开发，有以下相关实例可供参考：
642
643- [弹性布局（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlexLayout)