先说结论
flex:1 === flex:1 1 0px
flex的含义
flex是 flex-grow 、flex-shrink 、flex-basis属性的缩写
flex: <flex-grow> <flex-shrink> <flex-basis>
- 当container_width > sum(flex_basis)时，flex-shrink值不会生效，各item根据flex-grow按比例分配剩余的空间
- 当container_width < sum(flex_basis)时，flex-grow值不会生效，各item以flex-basis为基础值，根据flex-shrink按比例缩小
eg：
当container_width=600px
总空间大于各basis之和，left = 600-200-300-20 = 80px，各个item均分剩余空间，80/3=26.67px
即
item1_width=200+22.67=226.67px
item2_width=300+22.67=326.67px
item3_width=20+22.67=46.67px
当container_width=200px，总空间小于各basis之和，所以需要缩放
即
shrink1=1/4=0.25
shrink2=2/4=0.5
shrink3=1/4=0.25
item1_width=200*(1-0.25)=226.67px
item2_width=300+22.67=326.67px
item3_width=20+22.67=46.67px
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
.container {
width: 100%;
display: flex;
height: 40px;
div:nth-of-type(1) {
flex: 1 1 200px;
background: burlywood;
}
div:nth-of-type(2) {
flex: 1 2 300px;
background: cadetblue;
}
div:nth-of-type(3) {
flex: 1 1 20px;
background: chocolate;
}
}
