flex 布局引起的元素宽度失效问题

目录

• flex 布局引起的元素宽度失效问题
  • bug 效果
  • 预期效果
  • 原因
  • 解决方案
  • 如果你觉得写的不错或者帮到你了，记得给我点个赞哟~

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 {
  width: 28rpx;
  margin-right: 14rpx;
  flex-shrink: 0;
}

加上 flex-shrink: 0; 后，就达到了预期效果~

如果你觉得写的不错或者帮到你了，记得给我点个赞哟~