css:flex:1 手工整理版

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

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

猜你喜欢

转载自blog.csdn.net/m0_71981318/article/details/125798714
今日推荐