首先,flex属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写
默认值为0 1 auto。后两个属性可选。
.item {flex: 1}表示 .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }
你的回答:
flex-grow :定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的`flex-grow`属性都为1,当父盒子有剩余空间,那么子盒子将等分剩余空间
如果一个项目的`flex-grow`属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink:定义项目的缩小比例,默认为1。
如果所有项目的`flex-shrink`属性都为1,当父空间不足时,那么子盒子都将等比例缩小。
如果一个项目的`flex-shrink`属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex-basis:用来设置盒子的基准宽度,它的默认值为auto,即项目的本来大小。
并且basis和width同时存在,basis会把width干掉
所以flex:1的逻辑就是用flex-basis把width替换,然后再用flex-grow等分剩余空间和flex-shrin等比例缩小。
以上手工自己整理,希望能帮到你!谢谢!