-
Notifications
You must be signed in to change notification settings - Fork 0
/
flex兼容.css
133 lines (119 loc) · 3.06 KB
/
flex兼容.css
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* 定义 */
.flex-def {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
/* 主轴居中 */
.flex-zCenter {
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
/* 主轴两端对齐 */
.flex-zBetween {
-webkit-box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* 主轴end对齐 */
.flex-zEnd {
-webkit-box-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
/* 主轴start对齐 */
.flex-zStart {
-webkit-box-pack: start;
-moz-justify-content: start;
-webkit-justify-content: start;
justify-content: start;
}
/* 侧轴居中 */
.flex-cCenter {
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
/* 侧轴start对齐 */
.flex-cStart {
-webkit-box-align: start;
-moz-align-items: start;
-webkit-align-items: start;
align-items: start;
}
/* 侧轴底部对齐 */
.flex-cEnd {
-webkit-box-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* 侧轴文本基线对齐 */
.flex-cBaseline {
-webkit-box-align: baseline;
-moz-align-items: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/* 侧轴上下对齐并铺满 */
.flex-cStretch {
-webkit-box-align: stretch;
-moz-align-items: stretch;
-webkit-align-items: stretch;
align-items: stretch;
}
/* 主轴从上到下 */
.flex-zTopBottom {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/* 主轴从下到上 */
.flex-zBottomTop {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/* 主轴从左到右 */
.flex-zLeftRight {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
/* 主轴从右到左 */
.flex-zRightLeft {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/* 是否允许子元素伸缩 */
.flex-item {
-webkit-box-flex: 1.0;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
/* 子元素的显示次序 */
.flex-order{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}