# Flex布局
在看这个部分的时候，请确保您对flex足够了解的，flex相关知识可以参考 阮一峰的flex教程 (opens new window)
由于在开发过程中，我们将大量使用 flex 布局，且常规的flex布局中有大量重复的样式，比如：
/* 父盒子 */
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
/* 子元素 */
flex: 1;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
PIUI提供了 pi-flex 和 pi-flex-sub 来快捷设置flex布局，它们的样式如下：
.pi-flex {
display: flex;
}
.pi-flex-sub {
flex: 1;
}
1
2
3
4
5
6
2
3
4
5
6
# 子元素是否换行
/* 换行 */
.pi-flex-wrap {
flex-wrap: wrap;
}
/* 不换行 */
.pi-flex-nowrap {
flex-wrap: nowrap;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 主轴方向
.pi-flex-row {
@extend .pi-flex;
flex-direction: row; // 子元素横向排列
}
.pi-flex-column {
@extend .pi-flex;
flex-direction: column; // 子元素纵向排列
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 主轴上的排列方式
.pi-justify-start {
@extend .pi-flex;
justify-content: flex-start;
}
.pi-justify-end {
@extend .pi-flex;
justify-content: flex-end;
}
.pi-justify-center {
@extend .pi-flex;
justify-content: center;
}
.pi-justify-between {
@extend .pi-flex;
justify-content: space-between;
}
.pi-justify-around {
@extend .pi-flex;
justify-content: space-around;
}
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
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
# 副轴上的对齐方式
.pi-align-start {
@extend .pi-flex;
align-items: flex-start;
}
.pi-align-end {
@extend .pi-flex;
align-items: flex-end;
}
.pi-align-center {
@extend .pi-flex;
align-items: center;
}
.pi-align-stretch {
@extend .pi-flex;
align-items: stretch;
}
.pi-align-baseline {
@extend .pi-flex;
align-items: baseline;
}
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 主副轴居中
// 横向flex中心居中
.pi-flex-row-center {
@extend .pi-flex-row;
@extend .pi-justify-center;
@extend .pi-align-center;
}
// 纵向flex中心居中
.pi-flex-column-center {
@extend .pi-flex-column;
@extend .pi-justify-center;
@extend .pi-align-center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13