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

以上手工自己整理，希望能帮到你！谢谢！