flex弹性:结合媒体查询布局代码

2020-06-0606:29:14网页制作Comments1,630 views字数 973阅读模式

不但使用了弹性布局,而且利用了媒体查询功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19424.html

代码实例如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19424.html

01
02
03
04
05
06
07
08
09
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.box div {
  width: 150px;
  padding: 20px;
}
.box1 {
  height: 120px;
  background-color: red;
}
.box2 {
  height: 100px;
  background-color: blue;
}
.box3 {
  height: 40px;
  background-color: pink;
}
.box4 {
  height: 200px;
  background-color: yellow;
}
@media (min-width: 640px) {
  .box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 640px) {
  .box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .box4 {
    order: -1;
  }
}
</style>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </div>
</body>
</html>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19424.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/19424.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定