• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 弹性布局（Flex）
2
3
4## 概述
5
6弹性布局（[Flex](../reference/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%').height(30).backgroundColor(0xF5DEB3)
349    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
350    Text('3').width('33%').height(50).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/arkui-ts/ts-universal-attributes-flex-layout.md)属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。如下例所示：
380
381
382
383```ts
384Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子元素居中
385  Text('alignSelf Start').width('25%').height(80)
386    .alignSelf(ItemAlign.Start)
387    .backgroundColor(0xF5DEB3)
388  Text('alignSelf Baseline')
389    .alignSelf(ItemAlign.Baseline)
390    .width('25%')
391    .height(80)
392    .backgroundColor(0xD2B48C)
393  Text('alignSelf Baseline').width('25%').height(100)
394    .backgroundColor(0xF5DEB3)
395    .alignSelf(ItemAlign.Baseline)
396  Text('no alignSelf').width('25%').height(100)
397    .backgroundColor(0xD2B48C)
398  Text('no alignSelf').width('25%').height(100)
399    .backgroundColor(0xF5DEB3)
400
401}.width('90%').height(220).backgroundColor(0xAFEEEE)
402```
403
404
405![zh-cn_image_0000001562940533](figures/zh-cn_image_0000001562940533.png)
406
407
408上例中，Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义。
409
410
411### 内容对齐
412
413可以通过[alignContent](../reference/arkui-ts/ts-container-flex.md)参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：
414
415- FlexAlign.Start：子元素各行与交叉轴起点对齐。
416
417
418  ```ts
419  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
420    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
421    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
422    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
423    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
424    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
425  }
426  .width('90%')
427  .height(100)
428  .backgroundColor(0xAFEEEE)
429  ```
430
431  ![zh-cn_image_0000001511900460](figures/zh-cn_image_0000001511900460.png)
432
433- FlexAlign.Center：子元素各行在交叉轴方向居中对齐。
434
435
436  ```ts
437  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
438    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
439    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
440    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
441    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
442    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
443  }
444  .width('90%')
445  .height(100)
446  .backgroundColor(0xAFEEEE)
447  ```
448
449  ![zh-cn_image_0000001511421256](figures/zh-cn_image_0000001511421256.png)
450
451- FlexAlign.End：子元素各行与交叉轴终点对齐。
452
453
454  ```ts
455  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
456    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
457    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
458    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
459    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
460    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
461  }
462  .width('90%')
463  .height(100)
464  .backgroundColor(0xAFEEEE)
465  ```
466
467  ![zh-cn_image_0000001562820801](figures/zh-cn_image_0000001562820801.png)
468
469- FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
470
471
472  ```ts
473  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
474    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
475    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
476    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
477    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
478    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
479  }
480  .width('90%')
481  .height(100)
482  .backgroundColor(0xAFEEEE)
483  ```
484
485  ![zh-cn_image_0000001511900448](figures/zh-cn_image_0000001511900448.png)
486
487- FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
488
489
490  ```ts
491  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
492    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
493    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
494    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
495    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
496    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
497  }
498  .width('90%')
499  .height(100)
500  .backgroundColor(0xAFEEEE)
501  ```
502
503  ![zh-cn_image_0000001562700445](figures/zh-cn_image_0000001562700445.png)
504
505- FlexAlign.SpaceEvenly:  子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
506
507
508  ```ts
509  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
510    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
511    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
512    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
513    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
514    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
515  }
516  .width('90%')
517  .height(100)
518  .backgroundColor(0xAFEEEE)
519  ```
520
521  ![zh-cn_image_0000001511580864](figures/zh-cn_image_0000001511580864.png)
522
523
524## 自适应拉伸
525
526在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。
527
528- flexBasis：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，那子项的空间为width/height的值。
529
530
531  ```ts
532  Flex() {
533    Text('flexBasis("auto")')
534      .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽松
535      .height(100)
536      .backgroundColor(0xF5DEB3)
537    Text('flexBasis("auto")'+' width("40%")')
538      .width('40%')
539      .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值
540      .height(100)
541      .backgroundColor(0xD2B48C)
542
543    Text('flexBasis(100)')  // 未设置width以及flexBasis值为100，宽度为100vp
544      .flexBasis(100)
545      .height(100)
546      .backgroundColor(0xF5DEB3)
547
548    Text('flexBasis(100)')
549      .flexBasis(100)
550      .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp
551      .height(100)
552      .backgroundColor(0xD2B48C)
553  }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
554  ```
555
556  ![zh-cn_image_0000001562940505](figures/zh-cn_image_0000001562940505.png)
557
558- flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。
559
560  ```ts
561  Flex() {
562    Text('flexGrow(2)')
563      .flexGrow(2)
564      .width(100)
565      .height(100)
566      .backgroundColor(0xF5DEB3)
567    Text('flexGrow(3)')
568      .flexGrow(3)
569      .width(100)
570      .height(100)
571      .backgroundColor(0xD2B48C)
572
573    Text('no flexGrow')
574      .width(100)
575      .height(100)
576      .backgroundColor(0xF5DEB3)
577  }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
578  ```
579
580  ![zh-cn_image_0000001562700449](figures/zh-cn_image_0000001562700449.png)
581
582  父容器宽度400vp，三个子元素原始宽度为100vp，总和300vp，剩余空间100vp根据flexGrow值的占比分配给子元素，未设置flexGrow的子元素不参与“瓜分”。
583
584  第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp * 2/5=140vp，第二个元素为100vp+100vp * 3/5=160vp。
585
586- flexShrink: 当父容器空间不足时，子元素的压缩比例。
587
588
589  ```ts
590  Flex({ direction: FlexDirection.Row }) {
591    Text('flexShrink(3)')
592      .flexShrink(3)
593      .width(200)
594      .height(100)
595      .backgroundColor(0xF5DEB3)
596
597    Text('no flexShrink')
598      .width(200)
599      .height(100)
600      .backgroundColor(0xD2B48C)
601
602    Text('flexShrink(2)')
603      .flexShrink(2)
604      .width(200)
605      .height(100)
606      .backgroundColor(0xF5DEB3)
607  }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
608  ```
609
610  ![zh-cn_image_0000001562820813](figures/zh-cn_image_0000001562820813.png)
611
612
613## 场景示例
614
615使用弹性布局，可以实现子元素沿水平方向排列，两端对齐，子元素间距平分，垂直方向上子元素居中的效果。
616
617
618```ts
619@Entry
620@Component
621struct FlexExample {
622  build() {
623    Column() {
624      Column({ space: 5 }) {
625        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
626          Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)
627          Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
628          Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
629        }
630        .height(70)
631        .width('90%')
632        .backgroundColor(0xAFEEEE)
633      }.width('100%').margin({ top: 5 })
634    }.width('100%')
635 }
636}
637```
638
639![zh-cn_image_0000001511900452](figures/zh-cn_image_0000001511900452.png)
640
641## 相关实例
642
643针对Flex开发，有以下相关实例可供参考：
644
645- [弹性布局（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlexLayout)