语法
flex:1;
flex:20%例如： flex:1 代表的意思是占父盒子剩余空间的1份。flex:20%代表占父盒子剩余空间的20%
其实，我更喜欢flex:1 ，在我看来其实就是权重
假如父元素的宽是700px，父元素里面有三个弹性盒子，第一个盒子的宽是100px，第二个盒子不写width 写flex：1，第三个盒子写 flex：2，也就是除了第一个盒子的100px，还剩600px
第二盒子 1份，第三个盒子2份，一共三份，从而根据权重平分，
第二个盒子flex：1代表盒子长度为200px
第三个盒子flex：2代表盒子长度为400px
案例效果
案例代码
<!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;
margin: 100px auto;
width: 700px;
height: 200px;
border: 1px solid #000;
}
.box div:nth-child(1) {
width: 100px;
height: 100px;
background-color: #bfa;
}
.box .flex1 {
flex: 1;
height: 100px;
background-color: pink;
}
.box .flex2 {
flex: 2;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>我的宽是100px</div>
<div class="flex1">flex: 1 我的权重是1，宽为200px</div>
<div class="flex2">flex: 2 我的权重是2，宽为400px</div>
</div>
</body>
</html>
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
