CSS媒体查询和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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flexlayout</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
flex: 1;
display: flex;
}
footer {
height: 40px;
background: #dddddd;
}
nav, aside {
width: 200px;
min-width: 200px;
max-width: 200px;
height: auto;
background: yellowgreen;
}
main {
flex: 1;
background: red;
}
@media (max-width: 1000px) {/*宽度不大于1000px时, 隐藏右边侧栏*/
aside {
display: none;
}
}
@media (max-width: 768px) {/*宽度不大于768px时, 排列方式改为纵向*/
.container {
flex-direction: column;
}
nav, aside {
width: 100%;
min-width: 100%;
max-width: 100%;
}
main {
height: 90vh;
}
}
</style>
</head>
<body>
<div class="container">
<nav>
<div>
<a href="#">link1</a>
</div>
</nav>
<main>
<div class="block1">
this is block1
</div>
<div class="block2">
this is block2
</div>
</main>
<aside>
<div class="side1">side1</div>
<div class="side2">side2</div>
</aside>
</div>
<footer>
copyrigtht C <a href="#">xuan</a>
</footer>
</body>
</html>
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!