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