1# Flex Layout (Flex)
2
3
4## Overview
5
6The flex layout, implemented using the [Flex](../reference/apis-arkui/arkui-ts/ts-container-flex.md) container component, provides simple and powerful tools for flexibly distributing space and aligning items. The flex layout is widely used in scenarios such as the navigation bar distribution on the page header, page framework setup, and arrangement of multiple lines of data.
7
8By default, the flex container has a main axis and a cross axis, and child elements are arranged along the main axis. The size of a child element along the main axis is referred to as its main axis size. Similarly, the size of a child element along the cross axis is referred to as its cross axis size.
9
10
11
12  **Figure 1** Flex container whose main axis runs in the horizontal direction
13
14![flex-layout](figures/flex-layout.png)
15
16
17## Basic Concepts
18
19- Main axis: axis along which child elements are placed in the **Flex** component. Child elements are laid out along the main axis by default. The start point of the main axis is referred to as main-start, and the end point is referred to as main-end.
20
21- Cross axis: axis that runs perpendicular to the main axis. The start point of the cross axis is referred to as cross-start, and the end point is referred to as cross-end.
22
23
24## Layout Direction
25
26In the flex layout, the child elements can be arranged in any direction. You can set the **direction** parameter to define the direction of the main axis and thereby control the arrangement of child elements.
27
28  **Figure 2** Flex layout direction
29
30![flex-layout-direction](figures/flex-layout-direction.png)
31
32- **FlexDirection.Row** (default value): The main axis runs along the row horizontally, and the child elements are laid out from the start edge of the main axis.
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  ![en-us_image_0000001562820817](figures/en-us_image_0000001562820817.png)
48
49- **FlexDirection.RowReverse**: The main axis runs along the row horizontally, and the child elements are laid out from the end edge of the main axis, in a direction opposite to **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  ![en-us_image_0000001511900464](figures/en-us_image_0000001511900464.png)
65
66- **FlexDirection.Column**: The main axis runs along the column vertically, and the child elements are laid out from the start edge of the main axis.
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  ![en-us_image_0000001511580884](figures/en-us_image_0000001511580884.png)
82
83- **FlexDirection.ColumnReverse**: The main axis runs along the column vertically, and the child elements are laid out from the end edge of the main axis, in a direction opposite to **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  ![en-us_image_0000001562940541](figures/en-us_image_0000001562940541.png)
99
100
101## Wrapping in the Flex Layout
102
103In the flex layout, child elements can be laid on a single line or on multiple lines. By default, child elements in the flex container are laid out on a single line (also called an axis). You can use the **wrap** attribute to set whether child elements can wrap onto multiple lines when the total main axis size of the child elements is greater than the main axis size of the container. When wrapped onto multiple lines, the child elements on the new line are aligned based on the cross axis direction.
104
105- **FlexWrap.NoWrap** (default value): Child elements are laid out on a single line. This may cause the child elements to shrink to fit the container when their total width is greater than the container width.
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  ![en-us_image_0000001562700425](figures/en-us_image_0000001562700425.png)
120
121- **FlexWrap.Wrap**: Child elements break into multiple lines and are aligned along the main axis.
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  ![en-us_image_0000001511740468](figures/en-us_image_0000001511740468.png)
136
137- **FlexWrap.WrapReverse**: Child elements break into multiple lines and are aligned in the reverse direction to the main axis.
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  ![en-us_image_0000001562940521](figures/en-us_image_0000001562940521.png)
152
153
154## Alignment on the Main Axis
155
156Use the **justifyContent** parameter to set alignment of child elements on the main axis.
157
158![flex-spindle-alignment](figures/flex-spindle-alignment.png)
159
160
161- **FlexAlign.Start** (default value): The child elements are aligned with each other toward the start edge of the container along the main axis.
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  ![en-us_image_0000001511421280](figures/en-us_image_0000001511421280.png)
177
178- **FlexAlign.Center**: The child elements are aligned with each other toward the center of the container along the main axis.
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  ![en-us_image_0000001563060681](figures/en-us_image_0000001563060681.png)
194
195- **FlexAlign.End**: The child elements are aligned with each other toward the end edge of the container along the main axis.
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  ![en-us_image_0000001562820809](figures/en-us_image_0000001562820809.png)
211
212- **FlexAlign.SpaceBetween**: The child elements are evenly distributed within the container along the main axis. The first and last child elements are aligned with the edges of the container.
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  ![en-us_image_0000001511421288](figures/en-us_image_0000001511421288.png)
228
229- **FlexAlign.SpaceAround**: The child elements are evenly distributed within the container along the main axis. The space between the first child element and main-start, and that between the last child element and main-end are both half of the space between two adjacent child elements.
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  ![en-us_image_0000001511900436](figures/en-us_image_0000001511900436.png)
245
246- **FlexAlign.SpaceEvenly**: The child elements are evenly distributed within the container along the main axis. The space between the first child element and main-start, the space between the last child element and main-end, and the space between two adjacent child elements are the same.
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  ![en-us_image_0000001563060713](figures/en-us_image_0000001563060713.png)
262
263
264## Alignment on the Cross Axis
265
266Alignment on the cross axis can be set for both the container and child elements, with that set for child elements having a higher priority.
267
268
269### Setting Alignment on the Cross Axis for the Container
270
271Use the **alignItems** parameter of the **Flex** component to set alignment of child elements on the cross axis.
272
273
274- **ItemAlign.Auto**: The child elements are automatically aligned in the flex container.
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  ![en-us_image_0000001563060677](figures/en-us_image_0000001563060677.png)
290
291- **ItemAlign.Start**: The child elements are aligned with the start edge of the container along the cross axis.
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  ![en-us_image_0000001562700453](figures/en-us_image_0000001562700453.png)
307
308- **ItemAlign.Start**: The child elements are aligned with the center of the container along the cross axis.
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  ![en-us_image_0000001511740484](figures/en-us_image_0000001511740484.png)
324
325- **ItemAlign.End**: The child elements are aligned with the end edge of the container along the cross axis.
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  ![en-us_image_0000001511580876](figures/en-us_image_0000001511580876.png)
341
342- **ItemAlign.Stretch**: The child elements are stretched along the cross axis. If no constraints are set, the child elements are stretched to fill the size of the container on the cross axis.
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  ![en-us_image_0000001511421252](figures/en-us_image_0000001511421252.png)
358
359- **ItemAlign.Baseline**: The child elements are aligned at the baseline of the cross axis.
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  ![en-us_image_0000001511900440](figures/en-us_image_0000001511900440.png)
375
376
377### Setting Alignment on the Cross Axis for Child Elements
378
379Use the [alignSelf](../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#alignself) attribute of child elements to set their alignment in the container on the cross axis. The settings overwrite the default **alignItems** settings in the flex container. The sample code is as follows:
380
381```ts
382Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // The child elements are aligned with the center of the container.
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![en-us_image_0000001562940533](figures/en-us_image_0000001562940533.png)
404
405
406In the preceding example, the **alignItems** parameter of the **Flex** container and the **alignSelf** attribute of the child element are both set. In this case, the **alignSelf** settings take effect.
407
408
409### Content Alignment
410
411Use the [alignContent](../reference/apis-arkui/arkui-ts/ts-container-flex.md#apis) parameter to set how space is distributed between and around child elements along the cross axis. This parameter is effective only for a multi-line flex layout. Its available options are as follows:
412
413- **FlexAlign.Start**: The child elements are aligned toward the start edge of the cross axis in the container.
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  ![en-us_image_0000001511900460](figures/en-us_image_0000001511900460.png)
430
431- **FlexAlign.Center**: The child elements are aligned toward the center of the cross axis in the container.
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  ![en-us_image_0000001511421256](figures/en-us_image_0000001511421256.png)
448
449- **FlexAlign.End**: The child elements are aligned toward the end edge of the cross axis in the container.
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  ![en-us_image_0000001562820801](figures/en-us_image_0000001562820801.png)
466
467- **FlexAlign.SpaceBetween**: The child elements are evenly distributed within the container along the cross axis. The first and last child elements are aligned with the edges of the container.
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  ![en-us_image_0000001511900448](figures/en-us_image_0000001511900448.png)
484
485- **FlexAlign.SpaceAround**: The child elements are evenly distributed within the container along the cross axis. The space between the first child element and cross-start, and that between the last child element and cross-end are both half of the space between two adjacent child elements.
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  ![en-us_image_0000001562700445](figures/en-us_image_0000001562700445.png)
502
503- **FlexAlign.SpaceEvenly**: The child elements are evenly distributed within the container along the cross axis. The space between the first child element and cross-start, the space between the last child element and cross-end, and the space between two adjacent child elements are the same.
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  ![en-us_image_0000001511580864](figures/en-us_image_0000001511580864.png)
520
521
522## Adaptive Scaling
523
524When the size of the flex container is not large enough, the following attributes of the child element can be used to achieve adaptive layout:
525
526- [flexBasis](../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#flexbasis): base size of the child element in the container along the main axis. It sets the space occupied by the child element. If this attribute is not set, the space occupied by the child element is the result of width/height.
527
528
529  ```ts
530  Flex() {
531    Text('flexBasis("auto")')
532      .flexBasis('auto') // When width is not set and flexBasis is set to auto, the content is at its own width.
533      .height(100)
534      .backgroundColor(0xF5DEB3)
535    Text('flexBasis("auto")'+' width("40%")')
536      .width('40%')
537      .flexBasis('auto') // When width is set and flexBasis is set to auto, the value of width is used.
538      .height(100)
539      .backgroundColor(0xD2B48C)
540
541    Text('flexBasis(100)') // When width is not set and flexBasis is set to 100, the width is 100 vp.
542      .flexBasis(100)
543      .height(100)
544      .backgroundColor(0xF5DEB3)
545
546    Text('flexBasis(100)')
547      .flexBasis(100)
548      .width(200) // When both width and flexBasis are set, flexBasis takes precedence, and the width is 100 vp.
549      .height(100)
550      .backgroundColor(0xD2B48C)
551  }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
552  ```
553
554  ![en-us_image_0000001562940505](figures/en-us_image_0000001562940505.png)
555
556- [flexGrow](../reference/apis-arkui//arkui-ts/ts-universal-attributes-flex-layout.md#flexgrow): percentage of the flex container's remaining space that is allocated to the child element. In other words, it is the grow factor of the child element.
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  ![en-us_image_0000001562700449](figures/en-us_image_0000001562700449.png)
579
580  In the preceding figure, the width of the flex container is 420 vp, the original width of the three child elements is 100 vp each, and the left and right margins are 20 vp in total. The flex container's remaining 100 vp space is allocated to the child elements based on their **flexGrow** settings. The third child element does not have **flexGrow** set and therefore does not participate in the allocation of remaining space.
581
582  After receiving their share of remaining space at the 2:3 ratio, the first and second child elements are at a width of 140 vp (100 vp + 100 vp x 2/5) and 160 vp (100 vp + 100 vp x 3/5), respectively.
583
584- [flexShrink](../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md#flexshrink): shrink factor of the child element when the size of all child elements is larger than the flex container.
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  ![en-us_image_0000001562820813](figures/en-us_image_0000001562820813.png)
609
610
611## Example
612
613In this example, child elements are arranged horizontally in the flex layout, aligned at both edges, evenly spaced, and centered in the vertical direction.
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![en-us_image_0000001511900452](figures/en-us_image_0000001511900452.png)
638