flex 布局 弹性布局 笔记

使用 弹性布局 可以开发自动适应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;

}

效果图: