目录
flex布局案例
# flex布局案例-骰子
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
<html>
<div class="box2">
<div class="first-face">
<span class="pip"></span>
</div>
<div class="second-face">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="third-face">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="fourth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="fifth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="sixth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
</div>
</html>
<style>
/* 一 */
.first-face { /* 形成上下左右居中 */
display: flex;
/* 项目在主轴上居中 */
justify-content: center;
/* 项目在交叉轴上居中 */
align-items: center;
}
/* 二 */
.second-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.second-face .pip:nth-of-type(2) {
/* 居下 */
align-self: flex-end;
}/* 三 */
.third-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.third-face .pip:nth-of-type(2) {
/* 居中 */
align-self: center;
}
.third-face .pip:nth-of-type(3) {
/* 居下 */
align-self: flex-end;
}
/* 四 、六*/
.fourth-face,
.sixth-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.fourth-face .column,
.sixth-face .column {
display: flex;
/* 纵向排列 */
flex-direction: column;
/* 两侧对齐 */
justify-content: space-between;
}
/* 五 */
.fifth-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.fifth-face .column {
display: flex;
/* 纵向排列 */
flex-direction: column;
/* 两侧对齐 */
justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
/* 居中对齐 */
justify-content: center;
}
/* 基础样式 */
.box2 {
display: flex;
/* 项目在交叉轴上居中 */
align-items: center;
/* 项目在主轴上居中 */
justify-content: center;
vertical-align: center;
/* 允许项目换行 */
flex-wrap: wrap; /* 项目是多行时以交叉轴中心对齐 */
align-content: center;
font-family: 'Open Sans', sans-serif;
}
/* 类名包含face的元素 */
[class$="face"] {
margin: 5px;
padding: 4px; background-color: #e7e7e7;
width: 104px;
height: 104px;
object-fit: contain; box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7; border-radius: 10%;
}
.pip {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px; background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
</style>
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)
# flex布局案例-圣杯布局
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
<html>
<div class="HolyGrail">
<header>#header</header>
<div class="wrap">
<nav class="left">left 宽度固定200px</nav>
<main class="content">center 宽度自适应</main>
<aside class="right">right 宽度固定200px</aside>
</div>
<footer>#footer</footer>
</div>
</html>
<style>
.HolyGrail {
text-align: center;
display: flex;
min-height: 40vh;
flex-direction: column;
}
.HolyGrail .wrap {
display: flex;
flex: 1;
}
.HolyGrail .content {
background: #eee;
flex: 1;
}
.HolyGrail .left,.HolyGrail .right {
background:lightgreen;
flex: 0 0 200px;
}
.HolyGrail header,.HolyGrail footer{
background:#999;
height: 50px;
line-height: 50px;
}
.HolyGrail .left {
background:salmon;
}
</style>
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
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
参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)
# flex布局案例-网格布局
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
<html>
<div class="grid">
<div class="grid-cell">1/2</div>
<div class="grid-cell">1/2</div>
</div>
<div class="grid">
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
</div>
<div class="grid">
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
</div>
<div class="grid text">
<div class="grid-cell">
高度会跟随右侧元素变化
</div>
<div class="grid-cell">
内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充
</div>
</div>
<h4>某个网格设置百分比宽度</h4>
<div class="grid">
<div class="grid-cell u-full">100%</div>
</div>
<div class="grid">
<div class="grid-cell u-1of2">50%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<div class="grid">
<div class="grid-cell u-1of3">33.33%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<div class="grid">
<div class="grid-cell u-1of4">25%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
</html>
<style>
.grid {
display: flex;
}
.grid-cell {
flex: 1;
}
.grid-cell.u-full {
flex: 0 0 100%;
}
.grid-cell.u-1of2 {
flex: 0 0 50%;
}
.grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.grid-cell.u-1of4 {
flex: 0 0 25%;
}
/* 基础样式 */
.grid-cell {
background: #eee;
text-align: center;
margin: 5px;
padding: 10px 0;
}
.text .grid-cell {
text-align: left
}
</style>
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
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
参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)
# flex布局案例-输入框布局
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
<html>
<div class="InputAddOn">
<span class="InputAddOn-item">icon</span>
<input class="InputAddOn-field" placeholder="input宽度自适应">
<button class="InputAddOn-item">提交</button>
</div>
<br/>
<div class="Media">
<div class="Media-figure">左侧固定</div>
<p class="Media-body">右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应</p>
</div>
</html>
<style>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
width: 100px;
height: 100px;
background: #eee;
margin-right: 1em;
}
.Media-body {
flex: 1;
}
/* 基础样式 */
input:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
input {
outline-color: invert;
outline-style: none;
outline-width: 0px;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
box-shadow: none;
}
.InputAddOn-item {
width: 100px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
background: #eee
}
.InputAddOn-field {
height: 30px;
padding: 1px 6px;
border: 1px solid #ccc;
border-left: none;
border-right: none;
}
</style>
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
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
参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)
上次更新: 2025/11/25, 03:24:47