css:flex:1 精华个人总结版

92 阅读1分钟

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等比例缩小。

以上手工自己整理,希望能帮到你!谢谢!