先說結(jié)論
flex:1 === flex:1 1 0px
flex的含義
flex是 flex-grow 芦鳍、flex-shrink 、flex-basis屬性的縮寫
flex: <flex-grow> <flex-shrink> <flex-basis>
- 當(dāng)container_width > sum(flex_basis)時(shí)杭棵，flex-shrink值不會(huì)生效，各item根據(jù)flex-grow按比例分配剩余的空間
- 當(dāng)container_width < sum(flex_basis)時(shí)氛赐，flex-grow值不會(huì)生效魂爪，各item以flex-basis為基礎(chǔ)值，根據(jù)flex-shrink按比例縮小
eg：
當(dāng)container_width=600px
總空間大于各basis之和艰管，left = 600-200-300-20 = 80px滓侍，各個(gè)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
當(dāng)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;
}
}
