最常用的text-align、align-item、vertical_align、justify-content 这四个参数容易搞混淆 ，没搞清楚概念经常循环着尝试影响效率 😂，所以动手实践搞清楚一下。
提示：只演示2-3种属性值效果，其他去查api即可
概要内容：
- text-align
- align-item
- vertical_align
- justify-content
1. text-align
作用：针对行内内容，相对父元素的（横轴）对齐方式
示例：
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
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>text-align</title>
<style>
.left {
border: 1px solid black;
text-align: left;
width: 600px;
height: 50px;
}
.left .block {
background: red;
width: 300px;
display: inline-block;
}
.center {
border: 1px solid black;
text-align: center;
width: 600px;
height: 50px;
text-align: center;
}
.center .block {
background: green;
width: 300px;
display: inline-block;
}
.right {
border: 1px solid black;
text-align: right;
width: 600px;
height: 50px;
text-align: right;
}
.right .block {
background: gold;
width: 300px;
display: inline-block;
}
</style>
</head>
<body>
<div class="left">
<div class="block">
this is a block , text-align: left;
</div>
</div>
<div class="center">
<div class="block">
this is a block, text-align: center;
</div>
</div>
<div class="right">
<div class="block">
this is a block, text-align: right;
</div>
</div>
</body>
</html>示例效果：
![]()
2. align-items
作用：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
- 示例
1 |
|
示例图
![]()
3. vertical-align
作用：定义行内元素的基线相对于该元素所在行的基线的(纵轴)垂直对齐方式
示例
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
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
border: 1px solid black;
}
.parent .default {
background-color: grey;
display: inline-block;
height: 50px;
margin-bottom: 10px;
}
.parent .top {
background-color: red;
display: inline-block;
height: 50px;
vertical-align: text-top;
margin-bottom: 10px;
}
.parent .bottom {
background-color: olive;
display: inline-block;
height: 50px;
vertical-align: text-bottom;
}
</style>
</head>
<body>
<div class="parent">一个<div class="default">this is a block</div>默认对齐的块元素。</div>
<div class="parent">一个<div class="top">this is a block</div>text-top 对齐的块元素。</div>
<div class="parent">一个<div class="bottom">this is a block</div>text-bottom 对齐的块元素。</div>
</body>
</html>示例效果：
![]()
4. justify-content
作用：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
示例：
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
<html>
<head>
<meta charset="utf-8">
<title>justify-content</title>
<style>
.center .contian {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: center;
}
.center .contian div {
width: 70px;
height: 70px;
}
.flex-start .contian {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: flex-start;
}
.flex-start .contian div {
width: 70px;
height: 70px;
}
.space-between .contian {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: space-between;
}
.space-between .contian div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div class="center">
<div>justify-content: center;</div>
<div class="contian">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
</div>
</div>
<div class="flex-start">
<div>flex-start</div>
<div class="contian">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
</div>
</div>
<div class="space-between">
<div>space-between</div>
<div class="contian">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
</div>
</div>
</body>
</html>示例效果：
![]()
以上: 如发现有问题，欢迎留言指出，我及时更正
