• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Flex
2
3以弹性方式布局子组件的容器组件。
4
5> **说明：**
6> - 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
7> - Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用[Column](ts-container-column.md)、[Row](ts-container-row.md)代替。
8> - Flex组件主轴默认不设置时撑满父容器，[Column](ts-container-column.md)、[Row](ts-container-row.md)组件主轴不设置时默认是跟随子节点大小。
9
10
11## 权限列表
12
13无
14
15
16## 子组件
17
18可以包含子组件。
19
20
21## 接口
22
23Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
24
25标准Flex布局容器。
26
27从API version 9开始，该接口支持在ArkTS卡片中使用。
28
29**参数:**
30
31| 参数名            | 参数类型                                     | 必填   | 默认值               | 参数描述                                     |
32| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
33| direction      | [FlexDirection](ts-appendix-enums.md#flexdirection) | 否    | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。                 |
34| wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap) | 否    | FlexWrap.NoWrap   | Flex容器是单行/列还是多行/列排列。<br/>**说明：** <br/>在多行布局时，通过交叉轴方向，确认新行堆叠方向。 |
35| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否    | FlexAlign.Start   | 所有子组件在Flex容器主轴上的对齐格式。                    |
36| alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | 否    | ItemAlign.Start   | 所有子组件在Flex容器交叉轴上的对齐格式。                   |
37| alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | 否    | FlexAlign.Start   | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
38
39
40## 示例
41
42```ts
43// xxx.ets
44@Entry
45@Component
46struct FlexExample1 {
47  build() {
48    Column() {
49      Column({ space: 5 }) {
50        Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
51        Flex({ direction: FlexDirection.Row }) {
52          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
53          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
54          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
55          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
56        }
57        .height(70)
58        .width('90%')
59        .padding(10)
60        .backgroundColor(0xAFEEEE)
61
62        Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
63        Flex({ direction: FlexDirection.RowReverse }) {
64          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
65          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
66          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
67          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
68        }
69        .height(70)
70        .width('90%')
71        .padding(10)
72        .backgroundColor(0xAFEEEE)
73
74        Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
75        Flex({ direction: FlexDirection.Column }) {
76          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
77          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
78          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
79          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
80        }
81        .height(160)
82        .width('90%')
83        .padding(10)
84        .backgroundColor(0xAFEEEE)
85
86        Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
87        Flex({ direction: FlexDirection.ColumnReverse }) {
88          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
89          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
90          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
91          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
92        }
93        .height(160)
94        .width('90%')
95        .padding(10)
96        .backgroundColor(0xAFEEEE)
97      }.width('100%').margin({ top: 5 })
98    }.width('100%')
99  }
100}
101```
102
103![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.PNG)
104
105```ts
106// xxx.ets
107@Entry
108@Component
109struct FlexExample2 {
110  build() {
111    Column() {
112      Column({ space: 5 }) {
113        Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
114        Flex({ wrap: FlexWrap.Wrap }) {
115          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
116          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
117          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
118        }
119        .width('90%')
120        .padding(10)
121        .backgroundColor(0xAFEEEE)
122
123        Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
124        Flex({ wrap: FlexWrap.NoWrap }) {
125          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
126          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
127          Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
128        }
129        .width('90%')
130        .padding(10)
131        .backgroundColor(0xAFEEEE)
132
133        Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
134        Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) {
135          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
136          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
137          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
138        }
139        .width('90%')
140        .height(120)
141        .padding(10)
142        .backgroundColor(0xAFEEEE)
143      }.width('100%').margin({ top: 5 })
144    }.width('100%')
145  }
146}
147```
148
149![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png)
150
151```ts
152// xxx.ets
153@Component
154struct JustifyContentFlex {
155  justifyContent : number
156
157  build() {
158    Flex({ justifyContent: this.justifyContent }) {
159      Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
160      Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
161      Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
162    }
163    .width('90%')
164    .padding(10)
165    .backgroundColor(0xAFEEEE)
166  }
167}
168
169@Entry
170@Component
171struct FlexExample3 {
172  build() {
173    Column() {
174      Column({ space: 5 }) {
175        Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
176        JustifyContentFlex({ justifyContent: FlexAlign.Start })
177
178        Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
179        JustifyContentFlex({ justifyContent: FlexAlign.Center })
180
181        Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
182        JustifyContentFlex({ justifyContent: FlexAlign.End })
183
184        Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
185        JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween })
186
187        Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
188        JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround })
189
190        Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
191        JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly })
192      }.width('100%').margin({ top: 5 })
193    }.width('100%')
194  }
195}
196```
197
198![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.PNG)
199
200```ts
201// xxx.ets
202@Component
203struct AlignItemsFlex {
204  alignItems : number
205
206  build() {
207    Flex({ alignItems: this.alignItems }) {
208      Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
209      Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
210      Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
211    }
212    .size({width: '90%', height: 80})
213    .padding(10)
214    .backgroundColor(0xAFEEEE)
215  }
216}
217
218@Entry
219@Component
220struct FlexExample4 {
221  build() {
222    Column() {
223      Column({ space: 5 }) {
224        Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
225        AlignItemsFlex({ alignItems: ItemAlign.Auto })
226
227        Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
228        AlignItemsFlex({ alignItems: ItemAlign.Start })
229
230        Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
231        AlignItemsFlex({ alignItems: ItemAlign.Center })
232
233        Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
234        AlignItemsFlex({ alignItems: ItemAlign.End })
235
236        Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
237        AlignItemsFlex({ alignItems: ItemAlign.Stretch })
238
239        Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
240        AlignItemsFlex({ alignItems: ItemAlign.Baseline })
241      }.width('100%').margin({ top: 5 })
242    }.width('100%')
243  }
244}
245```
246
247![zh-cn_image_0000001174422904](figures/zh-cn_image_0000001174422904.png)
248
249```ts
250// xxx.ets
251@Component
252struct AlignContentFlex {
253  alignContent: number
254
255  build() {
256    Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
257      Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
258      Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
259      Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
260    }
261    .size({ width: '90%', height: 90 })
262    .padding(10)
263    .backgroundColor(0xAFEEEE)
264  }
265}
266
267@Entry
268@Component
269struct FlexExample5 {
270  build() {
271    Column() {
272      Column({ space: 5 }) {
273        Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
274        AlignContentFlex({ alignContent: FlexAlign.Start })
275
276        Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
277        AlignContentFlex({ alignContent: FlexAlign.Center })
278
279        Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
280        AlignContentFlex({ alignContent: FlexAlign.End })
281
282        Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
283        AlignContentFlex({ alignContent: FlexAlign.SpaceBetween })
284
285        Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
286        AlignContentFlex({ alignContent: FlexAlign.SpaceAround })
287
288        Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
289        AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly })
290      }.width('100%').margin({ top: 5 })
291    }.width('100%')
292  }
293}
294```
295
296![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.PNG)
297