伸缩布局3
其他
2019-10-22 09:50:51
阅读次数: 0
文章目录
伸缩布局3
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 900px;
height: 600px;
border: 1px solid red;
margin:0 auto;
大专栏
伸缩布局3iv class="line"> display: flex;
justify-content: space-around;
}
.first{
width: 200px;
height: 200px;
background-color: red;
/*flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值,注意它只能加在子元素中
flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/
flex-grow:1;
/* 如果我加了flex-grow:1;那么他的宽就会变成350，就是用父盒子空出的宽300乘以1/2，原因是我有两个flex-grow值，加上我元素原有的宽 */
}
.second{
width: 200px;
height: 200px;
background-color: green;
flex-grow:1;
/* 如果我加了flex-grow:1;那么他的宽就会变成350，就是用父盒子空出的宽300乘以1/2，原因是我有两个flex-grow值加上我元素原有的宽 */
}
.third{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</body>
</html>
|
效果图如下
转载自www.cnblogs.com/dajunjun/p/11717945.html