# 5.2：弹性布局容器（Flex）
ArkUI 开发框架为了方便开发者实现灵活的页面布局方式，提供了弹性布局 Flex ，它用来为盒装模型提供最大的灵活性。 Flex 和 Row 、 Column 组件一样，也有主轴和纵轴之分。
# 5.2.1：Flex定义介绍
interface FlexInterface {
(value?: FlexOptions): FlexAttribute;
}
declare interface FlexOptions {
direction?: FlexDirection;
wrap?: FlexWrap;
justifyContent?: FlexAlign;
alignItems?: ItemAlign;
alignContent?: FlexAlign;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
value：设置子组件的排列样式，
FlexOptions定义了以下几种样式：direction：设置子组件的的排列方向即主轴方向，
FlexDirection定义了以下4种排列方式：Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。
Flex({direction: FlexDirection.Row}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21样例运行结果如下图所示：
RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。
Flex({direction: FlexDirection.RowReverse}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21样例运行结果如下图所示：
Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。
Flex({direction: FlexDirection.Column}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(220) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21样例运行结果如下图所示：
ColumnReverse：子组件竖直排列，即主轴为垂直方向，起点在下边，子组件由下到上排列。
Flex({direction: FlexDirection.ColumnReverse}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(220) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21样例运行结果如下图所示：
wrap：设置子组件是单行/列还是多行/列排序，
FlexWrap提供了以下3种类型：NoWrap（默认值）：子组件单行/列排序，子组件不允许超出容器。
Flex({direction: FlexDirection.Row, wrap: FlexWrap.NoWrap}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") Text('Text5') .fontSize(16) .padding(10) .backgroundColor("#cabcab") Text('Text6') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Wrap：子组件多行/列排序，子组件允许超出容器。
WrapReverse：子组件反向多行/列排序，子组件允许超出容器。
Flex({direction: FlexDirection.Row, wrap: FlexWrap.WrapReverse}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") Text('Text5') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text6') .fontSize(16) .padding(10) .backgroundColor("#cabcab") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
justifyContent：设置子组件在主轴上的对齐方式，
FlexAlign提供了以下 6 种对齐方式：Start（默认值）：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.End}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
SpaceBetween：
Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
SpaceAround：
Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
SpaceEvenly：
Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly}) { Text('Text1') .fontSize(16) .padding(10) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .padding(10) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .padding(10) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .padding(10) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
alignItems：设置子组件在纵轴方向上的排列方式，
ItemAlign定义了以下 6 种排列方式：Auto：自动布局，简单样例如下所示：
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Auto}) { Text('Text1') .fontSize(16) .size({width: 50, height: 20}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 60, height: 30}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 70, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 80, height: 50}) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21运行结果如下所示：
Start：起始对齐，简单样例如下所示：
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start}) { Text('Text1') .fontSize(16) .size({width: 50, height: 20}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 60, height: 30}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 70, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 80, height: 50}) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Center：居中对齐，简单样例如下所示：
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) { Text('Text1') .fontSize(16) .size({width: 50, height: 20}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 60, height: 30}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 70, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 80, height: 50}) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
End：末尾对齐，简单样例如下所示：
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.End}) { Text('Text1') .fontSize(16) .size({width: 50, height: 20}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 60, height: 30}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 70, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 80, height: 50}) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Baseline：基线对齐，简单样例如下所示：
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Baseline}) { Text('Text1') .fontSize(16) .size({width: 50, height: 20}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 60, height: 30}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 70, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 80, height: 50}) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Stretch（默认值）：
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Stretch}) { Text('Text1') .fontSize(16) .size({width: 50, height: 20}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 60, height: 30}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 70, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 80, height: 50}) .backgroundColor("#abcabc") } .width('100%') .height(60) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
alignContent：当纵轴有额外的空间时，多行内容的对齐方式。该属性仅在 wrap 属性为
Wrap或者WrapReverse时才生效，FlexAlign定义了以下 6 种对齐方式：Start（默认值）：设置子组件在纵轴方向首部对齐。
Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start}) { Text('Text1') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#abcabc") } .width('100%') .height(120) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Center：设置子组件在纵轴方向居中对齐。
Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center}) { Text('Text1') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#abcabc") } .width('100%') .height(120) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
End：设置子组件在纵轴方向尾部对齐。
Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End}) { Text('Text1') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#abcabc") } .width('100%') .height(120) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
SpaceBetween：设置子组件在纵轴方向等间距布局。
Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween}) { Text('Text1') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#abcabc") } .width('100%') .height(120) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
SpaceAround：设置子组件在纵轴方向间距布局，并且首尾子组件到
Flex的间距是子组件间距的一半。Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround}) { Text('Text1') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#abcabc") } .width('100%') .height(120) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
SpaceEvenly：设置子组件在纵轴方向等间距布局，并且首尾子组件到
Flex的间距子组件之间的间距都相等。Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly}) { Text('Text1') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#aabbcc") Text('Text2') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#bbaacc") Text('Text3') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#ccaabb") Text('Text4') .fontSize(16) .size({width: 90, height: 40}) .backgroundColor("#abcabc") } .width('100%') .height(120) .backgroundColor(Color.Pink)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 5.2.2：小结
本节简单介绍了 Flex 的使用方式，它的使用很灵活，读者熟练掌握各属性的渲染特性后可以根据设置参数构建出复杂的UI布局。
请作者喝杯咖啡
©arkui.club版权所有，禁止私自转发、克隆网站。
