使用 弹性布局 可以开发自动适应div大小按比例大小占用
html代码如下 :
<div class="box">
<div class="item" style="flex-grow: 1"></div>
<div class="item" style="flex-grow:2"></div>
<div class="item" style="flex-grow:1"></div>
</div>
flex-grow 属性设置当前块所占比例大小
CSS代码如下:
.box{
width: 500px;
height: 300px;
background: pink;
display: flex;
}
.item{
background: red;
margin: 10px;
}
效果图:
