使用 彈性布局 可以開發(fā)自動(dòng)適應(yīng)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 屬性設(shè)置當(dāng)前塊所占比例大小
CSS代碼如下:
.box{
width: 500px;
height: 300px;
background: pink;
display: flex;
}
.item{
background: red;
margin: 10px;
}
效果圖:
