flex 布局引起的元素宽度失效问题
有些 bug，一不注意可能排查半天都排查不出来，而它恰恰又是你自己造成的...
如下 bug 效果图，卡片样式写的好好的，图片下面的详细信息字段样式代码都是同一个（最后一行土地坐落设置的宽度是 100%，其他几个字段都是 50%），突然最后一行土地坐落抽筋了
bug 效果
预期效果
原因
愣了一下，调了几个 CSS 属性发现还是这样...到底是哪个样式写错了，起冲突了？
- 好在没过多久就觉得似曾相识，刚开始接触 flex 布局的时候好像看到过这个"效果"
- 之前内容比较多，通过
display: flex;给元素设置 flex 布局的时候就会这样，然后我调整样式就调好了，这不就是还没调样式的样子吗？
让我们来回顾一下阮一峰老师 Flex 文章的基本知识 Flex 布局教程：语法篇（非常感谢阮一峰老师的分享！）
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。- 如果所有项目的
flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
（所以就算我给 图标和土地坐落这个字段设置了宽度，也没生效）
解决方案
既然知道了是 flex-shrink 属性在作祟，那我们就做了它！
给左侧两个元素设置上 flex-shrink: 0; 来避免被拉伸，右侧的文本就让它接着用默认值 1，自由拉伸，占据剩余的空间
.cardInfoItem text:nth-last-child(2) {
flex-shrink: 0;
}
.cardInfoItem image {
28rpx;
margin-right: 14rpx;
flex-shrink: 0;
}
加上 flex-shrink: 0; 后，就达到了预期效果~
如果你觉得写的不错或者帮到你了，记得给我点个赞哟~
