思维导图
传统布局和flex布局对比
传统布局特点
兼容性好
布局繁琐
局限性，不能再移动端很好的布局
flex布局特点
操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分
建议
移动端 或者 PC端不需要兼容低版本浏览器 就可以使用用flex布局
flex布局原理
给父盒子设置display:flex;来控制子元素的排列方式
flex布局注意事项
使用flex布局就不要使用浮动、vertical-align，这两个样式会失效
flex布局中没有X轴和Y轴的概念
主轴和交叉轴是相对的，可以变换的。主轴方向是横的，交叉轴方向就是竖的。主轴方向是竖的，交叉轴方向就是横的
主轴相关配置
注意事项
1.主轴侧轴相关配置要写到父盒子中
flex-direction
功能和注意事项
功能：设置主轴的方向
注意事项：主轴和交叉轴是相对的，可以变换的。主轴是横的，交叉轴就是竖的，主轴是竖的，交叉轴就是横的
取值范围
| 值 |
说明 |
| row(默认) |
主轴为横轴，子元素横着排列(默认，常用) |
| column |
主轴为纵轴，子元素竖着排列 |
flex-direction:row(默认值，常用)
主轴为横轴，子元素横着排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style>
.box {
display: flex;
flex-direction: row;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
</div>
|
flex-direction:column (偶尔用)
主轴为纵轴，子元素从上到下排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style>
.box {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
</div>
|
justify-content
功能
设置主轴上的子元素排列方式
取值范围
| 值 |
说明 |
| flex-start(默认) |
从主轴头部开始排列 |
| flex-end |
从主轴尾部开始排列 |
| center |
居中显示 |
| space-around |
平分剩余空间 |
| space-between |
先两边贴边，再平分剩余空间 |
justify-content:flext-start(默认)
主轴为横轴时，从左向右排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
.box {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
</div>
|
主轴为纵轴时，从上向下排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
.box {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
</div>
|
justify-content:flex-end
主轴为横轴时，从右向左排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
.box {
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
</div>
|
主轴为纵轴时，从下向上排列
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
|
<style>
.box {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
</div>
|
justify-content:center(常用)
主轴为横向时，左右居中
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: row;
justify-content: center;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
</div>
</body>
</html>
|
主轴为纵向时，上下居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
.box {
display: flex;
flex-direction: column;
justify-content: center;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
</div>
|
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
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
</div>
</body>
</html>
|
主轴为纵轴时
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
</div>
</body>
</html>
|
justify-content:space-between(常用)
主轴为横轴时
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
</div>
</body>
</html>
|
主轴为纵轴时
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
</div>
</body>
</html>
|
flex-wrap
功能
设置子元素是否换行
取值范围
| 值 |
说明 |
| wrap |
换行(常用) |
| nowrap |
不换行(默认) |
flex-wrap:wrap(常用)
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
|
flex-wrap:nowrap
内容会挤到一块，子元素设置的宽度或高度会失效。
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
width: 100px;
height: 100px;
background-color: burlywood;
}
.box > span {
width: 40px;
height: 40px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
|
交叉轴(侧轴)相关配置
交叉轴和主轴是垂直关系，主轴为横向，交叉轴为纵向。主轴为纵向，交叉轴为横向。
注意事项
交叉轴的相关配置也是写在父盒子中。
align-items 设置侧轴上的子元素的排列方式(主轴不换行)
功能
设置侧轴上的子元素排列方式
取值范围
| 值 |
说明 |
| stretch(默认) |
侧轴内容拉伸显示 |
| flex-start |
从侧轴尾部开始排列 |
| flex-end |
从侧轴尾部开始排列 |
| center |
居中显示 |
在线演示地址
https://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch
align-items:flex-start
align-items:flex-end
align-items:center
align-items:stretch
align-content 设置侧轴上的子元素的排列方式（主轴换行）
功能
设置子项在侧轴上的排列方式
注意事项
主轴必须换行，flex-wrap:的值是wrap
取值范围
| 值 |
说明 |
| flex-start |
默认值，在侧轴的头部开始排列 |
| flex-end |
在侧轴的尾部开始排列 |
| center |
在侧轴中间显示 |
| space-around |
子项在侧轴平分剩余空间 |
| space-between |
子项在侧轴先贴边，剩下的平分剩余空间 |
在线演示地址
https://www.runoob.com/try/try.php?filename=trycss3_align-content
align-content:flex-start
align-content:flex-end
align-content:center
align-content:space-around
align-content:space-between
align-content 和align-items区别
- align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
- align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行找align-items 多行找 align-content
flex-flow
该属性是 flex-direction 和 flex-wrap 属性的复合属性
flex布局子项常见属性
- flex子项目占的份数
- align-self控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
flex 属性
flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
1
2
3
| .item {
flex: <number>; /* 默认值 0 */
}
|
align-self控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
1
2
3
4
| span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
|
order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。
1
2
3
| .item {
order: <number>;
}
|
面试题
如果以下两个面试题能理解，那么flex布局就掌握的非常OK了
使用flex布局完成圣杯布局
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.big {
display: flex;
width: 100%;
height: 300px;
border: 1px solid black;
}
.big > div:nth-child(1) {
flex: 1;
background-color: coral;
}
.big > div:nth-child(2) {
order: -1;
width: 200px;
background-color: bisque;
}
.big > div:nth-child(3) {
width: 200px;
background-color: burlywood;
}
</style>
</head>
<body>
<div class="big">
<div>center</div>
<div>left</div>
<div>right</div>
</div>
</body>
</html>
|
使用flex布局完成三点的骰子
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: flex;
justify-content: space-between;
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 30px;
}
div span {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: coral;
}
div span:nth-child(2) {
align-self: center;
}
div span:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
|
