使用 彈性布局 可以開發(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;

}

效果圖: