• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Flex
2
3The **\<Flex>** component allows for flexible layout of child components.
4
5> **NOTE**
6>
7> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8> - The **\<Flex>** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\<Column>](ts-container-column.md)** or **[\<Row>](ts-container-row.md)** instead under scenarios where consistently high performance is required.
9
10
11## Child Components
12
13Supported
14
15
16## APIs
17
18Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
19
20Creates a standard **\<Flex>** component.
21
22Since API version 9, this API is supported in ArkTS widgets.
23
24**Parameters**
25
26| Name           | Type                                    | Mandatory  | Default Value              | Description                                    |
27| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
28| direction      | [FlexDirection](ts-appendix-enums.md#flexdirection) | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.               |
29| wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)  | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
30| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
31| alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | No   | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
32| alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
33
34
35## Example
36
37```ts
38// xxx.ets
39@Entry
40@Component
41struct FlexExample1 {
42  build() {
43    Column() {
44      Column({ space: 5 }) {
45        Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
46        Flex({ direction: FlexDirection.Row }) {
47          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
48          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
49          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
50          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
51        }
52        .height(70)
53        .width('90%')
54        .padding(10)
55        .backgroundColor(0xAFEEEE)
56
57        Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
58        Flex({ direction: FlexDirection.RowReverse }) {
59          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
60          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
61          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
62          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
63        }
64        .height(70)
65        .width('90%')
66        .padding(10)
67        .backgroundColor(0xAFEEEE)
68
69        Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
70        Flex({ direction: FlexDirection.Column }) {
71          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
72          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
73          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
74          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
75        }
76        .height(160)
77        .width('90%')
78        .padding(10)
79        .backgroundColor(0xAFEEEE)
80
81        Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
82        Flex({ direction: FlexDirection.ColumnReverse }) {
83          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
84          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
85          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
86          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
87        }
88        .height(160)
89        .width('90%')
90        .padding(10)
91        .backgroundColor(0xAFEEEE)
92      }.width('100%').margin({ top: 5 })
93    }.width('100%')
94  }
95}
96```
97
98![en-us_image_0000001219744189](figures/en-us_image_0000001219744189.PNG)
99
100```ts
101// xxx.ets
102@Entry
103@Component
104struct FlexExample2 {
105  build() {
106    Column() {
107      Column({ space: 5 }) {
108        Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
109        Flex({ wrap: FlexWrap.Wrap }) {
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(0xD2B48C)
113        }
114        .width('90%')
115        .padding(10)
116        .backgroundColor(0xAFEEEE)
117
118        Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
119        Flex({ wrap: FlexWrap.NoWrap }) {
120          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
121          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
122          Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
123        }
124        .width('90%')
125        .padding(10)
126        .backgroundColor(0xAFEEEE)
127
128        Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
129        Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) {
130          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
131          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
132          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
133        }
134        .width('90%')
135        .height(120)
136        .padding(10)
137        .backgroundColor(0xAFEEEE)
138      }.width('100%').margin({ top: 5 })
139    }.width('100%')
140  }
141}
142```
143
144![en-us_image_0000001174264366](figures/en-us_image_0000001174264366.png)
145
146```ts
147// xxx.ets
148@Component
149struct JustifyContentFlex {
150  justifyContent : number
151
152  build() {
153    Flex({ justifyContent: this.justifyContent }) {
154      Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
155      Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
156      Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
157    }
158    .width('90%')
159    .padding(10)
160    .backgroundColor(0xAFEEEE)
161  }
162}
163
164@Entry
165@Component
166struct FlexExample3 {
167  build() {
168    Column() {
169      Column({ space: 5 }) {
170        Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
171        JustifyContentFlex({ justifyContent: FlexAlign.Start })
172
173        Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
174        JustifyContentFlex({ justifyContent: FlexAlign.Center })
175
176        Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
177        JustifyContentFlex({ justifyContent: FlexAlign.End })
178
179        Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
180        JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween })
181
182        Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
183        JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround })
184
185        Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
186        JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly })
187      }.width('100%').margin({ top: 5 })
188    }.width('100%')
189  }
190}
191```
192
193![en-us_image_0000001174582854](figures/en-us_image_0000001174582854.PNG)
194
195```ts
196// xxx.ets
197@Component
198struct AlignItemsFlex {
199  alignItems : number
200
201  build() {
202    Flex({ alignItems: this.alignItems }) {
203      Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
204      Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
205      Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
206    }
207    .size({width: '90%', height: 80})
208    .padding(10)
209    .backgroundColor(0xAFEEEE)
210  }
211}
212
213@Entry
214@Component
215struct FlexExample4 {
216  build() {
217    Column() {
218      Column({ space: 5 }) {
219        Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
220        AlignItemsFlex({ alignItems: ItemAlign.Auto })
221
222        Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
223        AlignItemsFlex({ alignItems: ItemAlign.Start })
224
225        Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
226        AlignItemsFlex({ alignItems: ItemAlign.Center })
227
228        Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
229        AlignItemsFlex({ alignItems: ItemAlign.End })
230
231        Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
232        AlignItemsFlex({ alignItems: ItemAlign.Stretch })
233
234        Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
235        AlignItemsFlex({ alignItems: ItemAlign.Baseline })
236      }.width('100%').margin({ top: 5 })
237    }.width('100%')
238  }
239}
240```
241
242![en-us_image_0000001174422904](figures/en-us_image_0000001174422904.jpg)
243
244```ts
245// xxx.ets
246@Component
247struct AlignContentFlex {
248  alignContent: number
249
250  build() {
251    Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
252      Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
253      Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
254      Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
255    }
256    .size({ width: '90%', height: 90 })
257    .padding(10)
258    .backgroundColor(0xAFEEEE)
259  }
260}
261
262@Entry
263@Component
264struct FlexExample5 {
265  build() {
266    Column() {
267      Column({ space: 5 }) {
268        Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
269        AlignContentFlex({ alignContent: FlexAlign.Start })
270
271        Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
272        AlignContentFlex({ alignContent: FlexAlign.Center })
273
274        Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
275        AlignContentFlex({ alignContent: FlexAlign.End })
276
277        Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
278        AlignContentFlex({ alignContent: FlexAlign.SpaceBetween })
279
280        Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
281        AlignContentFlex({ alignContent: FlexAlign.SpaceAround })
282
283        Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
284        AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly })
285      }.width('100%').margin({ top: 5 })
286    }.width('100%')
287  }
288}
289```
290
291![en-us_image_0000001174422906](figures/en-us_image_0000001174422906.PNG)
292